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 相关文章推荐
Z-Blog中用到的js代码
Mar 15 Javascript
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
页面加载完后自动执行一个方法的js代码
Sep 06 Javascript
JavaScript的作用域和块级作用域概念理解
Sep 21 Javascript
AngularJS入门教程之静态模板详解
Aug 18 Javascript
JS实现简单易用的手机端浮动窗口显示效果
Sep 07 Javascript
纯js实现画一棵树的示例
Sep 05 Javascript
Node 自动化部署的方法
Oct 17 Javascript
JS实现给数组对象排序的方法分析
Jun 24 Javascript
js中关于Blob对象的介绍与使用
Nov 29 Javascript
原生javascript如何实现共享onload事件
Jul 03 Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
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
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
2016/07/09 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
小谈angular ng deploy的实现
2020/04/07 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
浅析Python中的多重继承
2015/04/28 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
Python实现一个优先级队列的方法
2020/07/31 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
介绍一下代理模式(Proxy)
2014/10/17 面试题
教师党员思想汇报
2014/01/06 职场文书
《我不是最弱小的》教学反思
2014/02/23 职场文书
国际贸易求职信
2014/07/05 职场文书
Python+uiautomator2实现自动刷抖音视频功能
2021/04/29 Python