一、基本概念
哎呀妈VueRouter这玩意太牛逼了！自动跳转，单页网站方面的重定向轻而易举！操作起来非常简便，就两招：1.给”路径”(path)加上特性；2.设定个“名字”(name)就妥了。具体咋整还得看需求~这么一搞，用户体验不立马飙升吗？
路径重定向示例：
想让用户在网页之间跳转吗？最简单的办法就是用路径重定向！下次你想让某个链接点开就跳转其他网页的话，只需设定好重定向规则就行了。
名称重定向示例：
这个 vue router 真的超棒哒！现在咱们可以用它的名字直接跳转网页，不用再费劲儿地复制粘贴链接了，真是方便极了！只要在URL上填上名字就行，是不是很简单？这样书写代码也更好理解和调试了
const routes = [
{ path: '/', redirect: '/home' },
{ path: '*', redirect: '/404' }
]
二、重定向最佳实践
const routes = [
{ path: '/home', name: 'home', component: Home },
{ path: '/about', name: 'about', component: About },
{ path: '/profile', name: 'profile', component: Profile },
{ path: '/redirect', redirect: { name: 'home' } }
]
1.默认路由重定向
兄弟，你得让游客先看着咱们的主页呀。这可不是什么大问题！只要在Vue Router里面加点跳转功能就搞定了！这么一搞，一进去就能看到你想要看的东西了，多简单！
2.动态参数重定向
悄悄告诉你，我们那儿的getUserInfo()功能搞定了，再也不需要你到处找角色！只要瞄一眼就能看出用户是哪个角色，接着就是按照角色直接跳转对应的页面了，可方便了！无论碰到什么问题，导航都妥妥滴不怕了哟~
const routes = [
{ path: '/', redirect: '/home' },
{ path: '/home', component: Home },
{ path: '/about', component: About },
{ path: '/profile', component: Profile },
]
3.路由守卫中的重定向
你知道Vue Router保护网站的奥妙之处吗？就在于它的”路由守护者”这个小功能，简直太厉害了！它不仅让咱们清楚地看到是谁在访问啥，而且还能阻止或放行，简直就像给网站穿上了防护甲，既安心又放心！如果再加几个条件进去，那简直让人眼前一亮！
简单说，每次测试前得看看大家有没有登录。如果还没有，就直接把他们送到登录页面去，认证过了才放心这样咱们app中的信息和设备就能多层保护~
这代码就是教你咋在route guards里利用checkAuth()来查验用户登录状态哦!有啥需求就跳呗，没事儿就接着按流程干活去。学学好运用route guards方法，保证你的软件稳如泰山、游刃有余！
const routes = [
{ path: '/', redirect: to => {
const { role } = getUserInfo()
return role === 'admin' ? '/admin' : '/user'
}},
{ path: '/admin', component: Admin },
{ path: '/user', component: User },
]
三、总结与展望
你的VueRouter设定对不对？是否成功地进行了重定向！要记住默认重定向与动态参数重定向这两部分，确保界面顺畅好用哈。不要忘记用路由守卫搞点小处理，让用户使用时觉得更爽快、更放心！
想好用？选个好的转向策略很重要！再就是，靠技巧来设置VueRouter的引路路线吧；充分运用VueRouter各种本领，让你的App更好使，用户玩的更High！
看完这篇小文，你应该就能熟练运用Vue Router实现网页跳转啦～如果感兴趣记得分享给你身边小伙伴哦
router.beforeEach((to, from, next) => {
const isAuthenticated = checkAuth()
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})
。
评论0