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

　　

<强>重定向

　　

重定向也是通过航线配置来完成,下面例子是从/重定向到/b:

　　 　　 　　const路由器=new VueRouter ({ 　　路线:[ 　　{路径:“/?重定向:'/b '} 　　] 　　}) 　　 　　 　　

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

　　 　　 　　const路由器=new VueRouter ({ 　　路线:[ 　　{路径:“/?重定向:'/b '} 　　] 　　}) 　　 　　 　　

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

　　 　　 　　const路由器=new VueRouter ({ 　　路线:[ 　　{路径:“/?重定向:=比;{//方法接收目标路由作为参数//返回重定向的字符串路径/路径对象 　　}} 　　] 　　}) 　　 　　 　　

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

　　

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

　　

<强>别名

　　

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

　　

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

　　

上面对应的路由配置为:

　　 　　 　　const路由器=new VueRouter ({ 　　路线:[ 　　{路径:“/?组件:一个,别名:'/b '} 　　] 　　}) 　　 　　 　　

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

　　

<强> vue-router重定向重定向和别名别名的用法区分 　　

　　 　　

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

　　

<强>重定向定向

　　

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

　　 　　 　　出口默认新路由器({ 　　路线:[ 　　{ 　　路径:“/? 　　名称:“HelloWorld”, 　　组件:HelloWorld 　　}, 　　{ 　　路径:/转转, 　　重定向:“/? 　　} 　　] 　　}) 　　 　　 　　 　　 　　
　　

& lt; router-link="/"祝辞Home | 　　

　　

& lt; router-link="/转转”祝辞goHome

　　 　　

　　如例子,“/转转”的路由结果跳转至“/备柯悸酚?最终结果就是两个路由显示的页面内容完全一致。注意:包括浏览器地址栏的路由原路径也随之改变显示为重定向的路径!

　　

<强>别名别名/强>

　　

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

　　 　　 　　出口默认新路由器({ 　　路线:[ 　　{ 　　路径:/hi1, 　　组件:hi1, 　　别名:‘/Jsxj’ 　　} 　　] 　　}) 　　 　　 　　 　　
　　

& lt; router-link="/hi1”祝辞Hi1 | 　　

　　

& lt; router-link="/Jsxj”祝辞Jsxj

　　 　　 　　

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

　　

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

　　 　　 　　

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

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