vue-router

首先安装vue-router

npm install vue-router --save

在src下新建router文件夹

再新建index.js文件

//router->index.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    redirect: '/helloworld',

  },
  {
    name: 'HelloWorld',
    path: '/helloworld',
    component: () => import('@/components/HelloWorld.vue'),
    meta: {
      keepAlive: true
    },
  },
  {
    name: 'A',
    path: '/a',
    component: () => import('@/components/A.vue'),
  },
  {
    name: 'B',
    path: '/b',
    component: () => import('@/components/B.vue'),
  },
  {
    name: 'C',
    path: '/c',
    component: () => import('@/components/C.vue'),
  },
]

const router = new VueRouter({
  mode: 'history', // 访问路径不带#号
  routes,
  base: '/' // 配置单页应用的基路径
})
export default router

　　

在main.js中

import router from './router'

new Vue({

  router,

  render: h => h(App),

}).$mount('#app')

//App.vue
 <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>

　　

//HelloWorld.vue
<template>
  <div class="hello">
    <p>{{data}}</p>
    <button @click="add">+</button>
    <button @click="del">-</button>
    <router-link to="/a">AAA</router-link>
    <router-link to="/b">BBB</router-link>
    <router-link to="/c">CCC</router-link>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      data: 1
    }
  },
  methods: {
    add () {
      this.data++
    },
    del () {
      this.data--
    }
  }
}
</script>

　　携带参数跳转：

this.$router.replace({

            path: "/a",

            query: {

              realTitle: this.title,

              realTime: this.time

            },

          });

获取路径上的参数：

$route.query.realTitle