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 相关文章推荐
基于JQuery的数字改变的动画效果--可用来做计数器
Aug 11 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
event.X和event.clientX的区别分析
Oct 06 Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
Bootstrap3学习笔记(三)之表格
May 20 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
详解如何在Vue里建立长按指令
Aug 20 Javascript
swiper4实现移动端导航切换
Oct 16 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
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
php多文件上传下载示例分享
2014/02/20 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
js 格式化时间日期函数小结
2010/03/20 Javascript
js跑马灯代码(自写)
2013/04/17 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
node.js中的fs.readSync方法使用说明
2014/12/17 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
教你用十行node.js代码读取docx的文本
2017/03/08 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
vue移动端模态框(可传参)的实现
2019/11/20 Javascript
[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13
2020/12/17 DOTA
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
Python中str.format()详解
2017/03/12 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
Python线程创建和终止实例代码
2018/01/20 Python
python实现简单http服务器功能
2018/09/17 Python
Python调用C++,通过Pybind11制作Python接口
2018/10/16 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
python基于opencv检测程序运行效率
2019/12/28 Python
html5-canvas中使用clip抠出一个区域的示例代码
2018/05/25 HTML / CSS
试述DBMS的主要功能
2016/11/13 面试题
如何定义一个可复用的服务
2014/09/30 面试题
《九色鹿》教学反思
2014/02/27 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
会计学毕业生求职信
2014/06/25 职场文书
大学四年个人总结
2015/03/03 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书
python爬取某网站原图作为壁纸
2021/06/02 Python
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS
pytest实现多进程与多线程运行超好用的插件
2022/07/15 Python