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


Posted in Javascript onSeptember 09, 2020

重定向

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

const router = new VueRouter({
 routes: [
 { path: '/a', redirect: '/b' }
 ]
})

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

const router = new VueRouter({
 routes: [
 { path: '/a', redirect: '/b' }
 ]
})

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

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

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

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

别名

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

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

上面对应的路由配置为:

const router = new VueRouter({
 routes: [
 { path: '/a', component: A, alias: '/b' }
 ]
})

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

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

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

重定向redirect

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

export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component:HelloWorld 
  },
  {
   path:'/gohome',
   redirect:'/'
  }
 ]
})

<router-link to="/">Home</router-link>|

<router-link to="/gohome">goHome</router-link>

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

别名alias

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

export default new Router({
 routes: [
  {
   path:'/hi1',
   component:hi1,
   alias:'/Jsxj'
  }
 ]
})

<router-link to="/hi1">Hi1</router-link>|

<router-link to="/Jsxj">Jsxj</router-link>

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

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

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

Javascript 相关文章推荐
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 Javascript
自定义百度分享的分享按钮
Mar 18 Javascript
javascript包装对象实例分析
Mar 27 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
vue 中固定导航栏的实例代码
Nov 01 Javascript
JS自定义右键菜单实现代码解析
Jul 16 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 Javascript
JavaScript常用8种数组去重代码实例
Sep 09 #Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 #Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 #jQuery
js实现右键弹出自定义菜单
Sep 08 #Javascript
vue 使用原生组件上传图片的实例
Sep 08 #Javascript
使用js和canvas实现时钟效果
Sep 08 #Javascript
javascript使用canvas实现饼状图效果
Sep 08 #Javascript
You might like
JS实现php的伪分页
2008/05/25 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
php实现图片缩略图的方法
2016/03/29 PHP
php禁用cookie后session设置方法分析
2016/10/19 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
js文字横向滚动特效
2015/11/11 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
jQuery动态生成Bootstrap表格
2016/11/01 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
解决vant-UI库修改样式无效的问题
2020/11/03 Javascript
在Python中定义和使用抽象类的方法
2016/06/30 Python
python入门教程之识别验证码
2017/03/04 Python
Python中单、双下划线的区别总结
2017/12/01 Python
Python 串口读写的实现方法
2019/06/12 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
python manage.py runserver流程解析
2019/11/08 Python
pytorch 求网络模型参数实例
2019/12/30 Python
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
电脑专业个人求职信范文
2014/02/04 职场文书
家长对孩子的评语
2014/04/18 职场文书
课内比教学心得体会
2014/09/09 职场文书
防汛工作情况汇报
2014/10/28 职场文书
实习单位证明范例
2014/11/17 职场文书
2014年司法局工作总结
2014/12/11 职场文书
建国大业电影观后感
2015/06/01 职场文书
幼儿园毕业致辞
2015/07/29 职场文书