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 相关文章推荐
JS 类型转换常见方法小结
May 31 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 Javascript
jquery 中ajax执行的优先级
Jun 22 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
Vue.JS入门教程之自定义指令
Dec 08 Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 Javascript
浅析vue-router实现原理及两种模式
Feb 11 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
新手学习PHP的一些基础知识分享
2011/07/27 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
利用node.js实现自动生成前端项目组件的方法详解
2017/07/12 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
2020/11/16 Javascript
JS实现京东商品分类侧边栏
2020/12/11 Javascript
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
利用python代码写的12306订票代码
2015/12/20 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
Python实现AI换脸功能
2020/04/10 Python
澳大利亚家具和家居用品在线:BROSA
2017/11/02 全球购物
ETO男装官方网店:ETO Jeans
2019/02/28 全球购物
华为慧通面试题
2012/09/11 面试题
法院个人总结
2015/03/03 职场文书
Python实现生活常识解答机器人
2021/06/28 Python
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers