编程导航(编程导航知识星球)
【点击查看】低成本上班族靠谱副业好项目 | 拼多多无货源创业7天起店爆单玩法
【点击查看】逆林创业记 | 拼多多电商店铺虚拟类项目新玩法(附完整词表&检测工具)
【点击查看】逆林创业记 | 小白ai写作一键生成爆文速成课
领300个信息差项目,见公众号【逆林创业记】(添加请备注:网站)
编程式导航
编程式导航就是无需点击事件来自动跳转路由页面编程导航,如我们访问一个不存在的路由并显示出404页面,并于3秒后自动跳回首页,这就需要用到编程式导航。
您访问的网页不存在
{{second}}秒返回首页
export default {
data () {
return {
second:3
}
},
mounted(){
let time = setInterval(()=>{
this.second--
if(this.second == 0){
clearInterval(time)
this.$router.push('/')//编程时导航 无需点击自动跳转页面
this.$router.replace('/')//没有历史记录
this.$router.go(-2)//回退
}
},3000)
}
}
例
而this.$router.push('/')和this.$router.go(-2)是有历史回退记录的
this.$router.replace('/')没有历史回退记录,
重定向
就是我访问你路由的时候给你跳转到另一个路由中去编程导航,如用户不小心访问到了你的admin管理员路由,那么就给重新定向到首页路由中去
redirect重定向
{
path: '/article/:id',
name: 'ArticleId',
redirect:'/',//重定向到首页
component:()=>import('../views/ArticleId.vue')
},
全局导航守卫
就是你在路由中跳转时处理的一些api
router.beforeEach((to,from)=>{
})
router.beforeEach((to,from)=>{
console.log(from);
console.log(to);
})
版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站不拥有所有权,不承担相关法律责任。如发现有侵权/违规的内容, 联系QQ3361245237,本站将立刻清除。
文章评论(0)