Vue-router路由重定向和别名

举报
学海无涯yc 发表于 2022/08/06 19:06:26 2022/08/06
【摘要】 Vue-router路由重定向redirect路由重定向:一般用在不同的页面跳转到同一个页面或是同一组件的情况。这时需要用到的是redirect参数,将要跳转的页面路径添加到redirect参数后。在路由重定向时,有两种情况:1.不携带参数进行路由重定向例子:demo2页面重定向到demo页面在src/router/index.js文件下增加demo2路由,这时不需要写component参数...

Vue-router

路由重定向redirect

路由重定向:一般用在不同的页面跳转到同一个页面或是同一组件的情况。
这时需要用到的是redirect参数,将要跳转的页面路径添加到redirect参数后。
在路由重定向时,有两种情况:
1.不携带参数进行路由重定向
例子:demo2页面重定向到demo页面

  • src/router/index.js文件下增加demo2路由,这时不需要写component参数段,只需要将重定向的路径写在redirect参数后。
{
	path:'/demo2',
	redirect:'/demo'
}
  • 然后在App.vue文件中添加<router-link>标签
 <router-link to="/demo">demo页面</router-link>|
 <router-link to="/demo2">返回demo页面</router-link>|

注意:运行之后,你会发现浏览器中的url地址是http://localhost:8080/#/demo与demo页面的路径是一致的,代表重定向成功。
运行结果:
在这里插入图片描述
附加:demo.vue文件的代码:

<template>
	<div>
		<h1>{{content}}</h1>
	</div>
</template>
<script>
	export default{
		name:'demo',
		data(){
			return {
				content:'你好,我是demo页面'
			}
		}
	}
</script>
<style>
</style>

2.携带参数进行路由重定向

  • 当进行路由重定向到一个需要传递参数的页面或是组件时,只需要将重定向(目标)页面中path参数拷贝到redirect参数就可以了。

假设params页面传递了两个参数:newsId和newsTitle,这时params路由配置:

{
   path:'/params/:newsId(\\d+)/:newsTitle',
   component:Params
}

如果params2页面需要重定向到params页面并且需要进行参数的传递,那么在进行路由配置时redirect参数与params页面的path参数需要保持一致。

{
	path:'/params2',
	redirect:'/params/:newsId(\\d+)/:newsTitle'
}

src/App.vue页面增加<router-link>标签

<router-link to="/params/120/武汉樱花">传递参数params页面</router-link>
<router-link to="/params/525/杭州西湖">携带参数返回params页面</router-link>

点击传递参数params页面的运行结果:
在这里插入图片描述
点击携带参数返回params页面的运行结果:
在这里插入图片描述
注意:运行之后,你会发现浏览器中的url地址是http://localhost:8080/#/params/525/杭州西湖与params页面的路径是一致的,只是传递的参数值不同,代表重定向成功。
附加:params.vue文件的代码:

<template>
	<div>
		<h1>
			{{ msg }}
		</h1>
		<p>传递过来的新闻id:{{ $route.params.newsId}}</p>
		<p>传递过来的新闻title:{{$route.params.newsTitle}}</p>
	</div>
</template>
<script>
	export default{
		data(){
			return {
				msg:'这是一个关于传递参数的简单测试'
			}
		}
	}
</script>
<style>
</style>

alias别名的作用:类似于重定向的效果

alias别名:给组件取一个别名,利用这个别名去访问页面。
例子:
demo.vue组件起一个alias别名,这时需要在src/router/index.js文件进行路由配置,这里取的别名是lucy

{
	path: '/demo',
	name: 'Demo',
	component: Demo,
	alias:'/lucy'
}

src/App.vue文件使用<router-link>标签里的to属性,进行重新定向。

<router-link to="/lucy">lucy页面</router-link>

运行结果:
在这里插入图片描述
点击lucy页面浏览器的url地址将会变成http://localhost:8080/#/lucy,这样就完成了alias别名的使用。

redirect和alias的区别
  • redirect:观察URL的变化,redirect是直接改变了url的值,把url变成了真实的path路径。
  • alias:URL路径没有发生改变,这种情况更友好,让用户知道自己访问的路径,只是改变了<router-view>中的内容。
注意这里有一个坑,alias别名不能在path路径为:/中使用,如果使用的话程序不会报错,但是网页中的内容将不会显示。

错误例子:

{
  path: '/',
  component: Hello,
  alias:'/lucy'
}
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200