Vue编程式路由导航和路由守卫
<router-link>
的replace属性
<router-link>- 作用：控制路由跳转时操作浏览器历史记录的模式
- 浏览器历史记录有两种写入方式：分别有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();
}
},