1、安装vue-router

npm install vue-router

2、在需要使用组件引入

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

3、router.beforeEach全局守卫

判断是否存在token值，如果存在就继续执行，如果不存在就跳转到指定页面，适用场景如用户点击购物车如果没有登录则自动跳转到登录页面等。。。

router.beforeEach((to,from,next)=>{
  if(to.path==='/user') {
      
    let token = localStorage.getItem("x-auth-token");
    if(token){
​
      next()
    }else{
        alert(123)
      // next('/user')
      //给出提示
      let obj = {content:"请先登录",icon:"info"}
​
      Store.dispatch("toastAsync",obj)
    }
​
    return
    
  }
  else{
    //其他页面不守卫
    next();
  }
​
})
​
​

4.解决from和to的报错(重复路由跳转详情页)

当重复路由跳转详情页的时候会发生报错，

解决方法

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}

如果还是报错的化，则需要使用路由降级

**meta是路由元信息

5、组件内使用场景

依然依赖上面的router文件

// js部分 // 随便你写点啥，头尾就先省略吧~

<script>
export default {
  data () {
    return {
      // 内容就省啦~重点往下看
    }
  },
  beforeRouteEnter: (to, from, next) => {
    // 组件内守卫
    next(vm => {
      // judge login
      let token = window.localStorage.getItem('token')
      if (to.meta.requireLogin && to.meta.requireLogin === 1) {
        if (token) {
          next()
        } else {
        // 不满足条件就要去进行登录操作
          next('/login')
        }
      } else if (to.meta.requireLogin && to.meta.requireLogin === 2) {
        if (token) {
          next('/')
        } else {
          next()
        }
      } else {
        next()
      }
    })
  }
}
</script>