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'
}