安裝路由

yarn add vue-router@3

引入

import VueRouter from 'vue-router'
Vue.use(VueRouter)

創(chuàng)建路由

import VueRouter from 'vue-router'
import About from '@/router/About.vue'
import Home from '@/router/Home.vue'
export const router = new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        },
    ]
})

Vue use

import { router } from './store'
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

頁面中使用

<div>
    <router-link to="/about" class="router" active-class="router-active">About</router-link>
    <br>
    <router-link to="/home" class="router" active-class="router-active">Home</router-link>
</div>
<div>
    <router-view></router-view>
</div>

route路由、router路由器

路由嵌套

{
  path: '/home',
    component: Home,
      children: [
        {
          path: 'news',
          component: News
        },
        {
          path: 'message',
          component: Message
        }
      ]
}

跳轉(zhuǎn)：

<router-link to='/home/news'>News</router-link>

路由緩存

<keep-alive include="['News','Message']">
     <div>
      <!-- 需要緩存組件 -->
     </div>
</keep-alive>

路由生命周期鉤子
激活時

activated(){

},

失活時

deactivated() {
    
},

另一個：http://www.itdecent.cn/p/85b2cfafe9eb
路由守衛(wèi)
//全局前置路由守衛(wèi)

router.beforeEach((to, from, next) => {
    //可以根據(jù)是否登錄判斷是否放行，放行調(diào)用next，不放行跳轉(zhuǎn)其他頁面
    if islogin {

    } else {
        next()
    }
})

后置路由守衛(wèi)

router.afterEach((to,from)=>{

})

獨享路由守衛(wèi)

 {
    path: '/about',
    component: About,
    beforeEnter: (yo, from, next) => {
       next()
    },
},

組件內(nèi)路由守衛(wèi)

 //通過路由規(guī)則，進入該組件時被調(diào)用
beforeRouteEnter(to, from, next) {
   next()
},
  //通過路由規(guī)則，離開該組件時被調(diào)用
beforeRouteLeave(to, from, next) {
   next()
}

其他傳參、Vue3路由等參見：
http://www.itdecent.cn/p/7087239f0d9e