Vue2-路由

安装路由

yarn add vue-router@3

引入

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

创建路由

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
        }
      ]
}

跳转：

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

路由缓存

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

路由生命周期钩子
激活时

activated(){

},

失活时

deactivated() {
    
},

另一个：https://www.jianshu.com/p/85b2cfafe9eb
路由守卫
//全局前置路由守卫

router.beforeEach((to, from, next) => {
    //可以根据是否登录判断是否放行，放行调用next，不放行跳转其他页面
    if islogin {

    } else {
        next()
    }
})

后置路由守卫

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

})

独享路由守卫

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

组件内路由守卫

 //通过路由规则，进入该组件时被调用
beforeRouteEnter(to, from, next) {
   next()
},
  //通过路由规则，离开该组件时被调用
beforeRouteLeave(to, from, next) {
   next()
}

其他传参、Vue3路由等参见：
https://www.jianshu.com/p/7087239f0d9e