Vue路由重定向和别名的区别说明

2023-07-17 00:12:04 79

重定向

重定向也是通过routes配置来完成，下面例子是从/a重定向到/b：

constrouter=newVueRouter({
routes:[
{path:'/a',redirect:'/b'}
]
})

重定向的目标也可以是一个命名的路由：

constrouter=newVueRouter({
routes:[
{path:'/a',redirect:'/b'}
]
})

甚至是一个方法，动态返回重定向目标：

constrouter=newVueRouter({
routes:[
{path:'/a',redirect:to=>{
//方法接收目标路由作为参数
//return重定向的字符串路径/路径对象
}}
]
})

注意导航守卫并没有应用在跳转路由上，而仅仅应用在其目标上。在下面这个例子中，为/a路由添加一个beforeEach或beforeLeave守卫并不会有任何效果。

其它高级用法，请参考例子。

别名

『重定向』的意思是，当用户访问/a时，URL将会被替换成/b，然后匹配路由为/b，那么『别名』又是什么呢？

/a的别名是/b，意味着，当用户访问/b时，URL会保持为/b，但是路由匹配则为/a，就像用户访问/a一样。

上面对应的路由配置为：

constrouter=newVueRouter({
routes:[
{path:'/a',component:A,alias:'/b'}
]
})

『别名』的功能让你可以自由地将UI结构映射到任意的URL，而不是受限于配置的嵌套路由结构。

补充知识：vue-router重定向redirect和别名alias的用法区分

vue-router是vue框架的重要且常用的插件之一，用于单页面应用的路径打包管理。项目中常会用到redirect和alias以做“页面假动作”跳转。

重定向redirect

顾名思义，这个属性用于重定向页面跳转路径。简单说就是设置了一个路由，它有自己的路径，但重定向跳转至另一个路由。

exportdefaultnewRouter({
routes:[
{
path:'/',
name:'HelloWorld',
component:HelloWorld
},
{
path:'/gohome',
redirect:'/'
}
]
})

Home|

goHome

如例子，“/gohome”的路由结果跳转至“/”根目录路由，最终结果就是两个路由显示的页面内容完全一致。注意：包括浏览器地址栏的路由原路径也随之改变显示为重定向的路径！

别名alias

其实就是为某个路由增加一个“花名”——新路径，使得不管应用到哪条路径最终都显示同一个路由的页面内容。举例：

exportdefaultnewRouter({
routes:[
{
path:'/hi1',
component:hi1,
alias:'/Jsxj'
}
]
})

Hi1|

Jsxj

如上，指向别名alias路径的'router-link'会跳转至path路径的路由页面，最终两个路径都会显示相同的页面内容。但区别于重定向的一点是，浏览器地址栏会保留alias的路径不会随之变动！这可能是客户往往更想看到的东西。

另外，重定向带参数的目标路由时，该路由的路径中参数名应与目标路由路径参数名一致，才可以向目标路由传递对应参数值。

以上这篇Vue路由重定向和别名的区别说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Vue路由 重定向和别名的区别说明

热门推荐

随机推荐

Vue路由重定向和别名的区别说明