Vue编程式路由导航和路由守卫

<router-link>的replace属性

• 作用：控制路由跳转时操作浏览器历史记录的模式
• 浏览器历史记录有两种写入方式：分别有push和replace，push是追加历史记录，replace是替换当前记录，路由跳转时是push
• 如何开启replace模式：

  <router-link replace ...>news</router-link> 

编程式路由导航

• 作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活
• 具体编码：

  methods: {   pushShow(m) {     this.$router.push({       name: 'msg-d',   // 就是路由的名称，不能使用path       params: {         id: m.id,         title: m.title,         views: m.views       }     })   },   replaceShow(m) {     this.$router.replace({       name: 'msg-d',   // 就是路由的名称，不能使用path       params: {         id: m.id,         title: m.title,         views: m.views       }     })   },   back() {  // 后退     this.$router.back()   },   forward() {   // 前进     this.$router.forward()   }, }, 

路由守卫

• 全局路由守卫

  // 全局前置路由守卫——初始化的时候被调用，每次路由切换之前被调用 router.beforeEach((to, from, next) => {   // to and from are both route objects. must call `next`.   if(to.meta.isAuth){     if(localStorage.getItem("user") === 'xiansen'){       next();     }else{       alert("您没有权限！");     }   }else{     next();   } })  // 全局后置路由守卫——初始化的时候被调用，每次路由切换之后被调用 router.afterEach((to, from) => {   // to and from are both route objects.   document.title = to.meta.title || '测试Vue脚手架' }) 

• 独享路由守卫（在路由中配置该属性，方法功能和上面的一样）

  beforeEnter:(to, from, next) => {   // 独享路由守卫   if(to.meta.isAuth){     if(localStorage.getItem("user") === 'xiansen'){       next();     }else{       alert("您没有权限！");     }   }else{     next();   } },