路由重定向——vue路由（四）
定义
重定向（Redirect）就是通过各种方法将各种网络请求重新定个方向转到其他位置。如：用户在商品页面,要购买商品服务器发现用户没登录,浏览器此时跳到登录页面,登录成功后返回到商品页面.又如：用户在个人中心,要修改密码服务器发现用户没登录,浏览器此时跳到登录页面,登录成功后返回到个人中心页面。
路由重定向需要使用到关键字Redirect和路由钩子函数（beforeEach(to, from, next)）来完成，下面通过一个具体的示例来做以说明。
使用router配置完成重定向（Redirect）
使用router配置完成重定向，有三种语法
直接使用path完成重定向，其语法格式为
routes[{
path:'/b'
component: b,
},
{
path:'/a'
redirect: b
}
]
当路由调用时使用出现路径“/a”时，打开b组件。
使用name完成重定位，其语法格式为
routes[{
path:'/b'
name:'b'
component: b,
},
{
path:'/a'
redirect: {name:'b'}
}
]
完成上述同样功能
使用一个方法完成路由重定向，其语法格式为
routes[{
path:'/b'
name:'b'
component: b,
},
{
path:'/a'
redirect: to=>{
return 'b' //返回路径'b'
}
}
]
【例】系统主页面包括导航栏和内容显示区两部分，导航栏包括首页、个人中心和关于三个组件，进入系统时页面内容显示区显示首页内容，执行个人中心页面，判断是否登录，没有跳转到登录页面。
- 编写各个组件内容，home.vue、mine.vue和about.vue，仅做演示使用，代码一致，如下
<template>
<div style="border:1px solid red;color:red;">
<p>首页</p> //我的、关于
</div>
</template>
<script>
export default {
name: 'home' //mine、about
}
</script>
<style>
</style>
登录组件（login.vue），
<template>
<div style="border:1px solid orange;color:orange;">
<h3>登录页面</h3>
<button @click="btnClick">登录</button>
</div>
</template>
<script>
export default {
name: 'login',
methods:{
btnClick(){
sessionStorage.setItem('state','yes')
this.$router.push({path:'/mine'});
}
}
}
</script>
<style>
</style>
点击登录按钮，将登录信息记录到sessionStorage中。
框架页面（mainpage.vue）包括导航栏和显示区两部分，代码如下
<template>
<div>
<div align="left">
<router-link to="/home">首页</router-link>
<router-link to="/wode">个人中心</router-link>
<router-link to="/about">关于</router-link>
</div>
<div>
<h1>内容栏</h1>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: 'mainpage'
}
</script>
<style>
</style>
上述代码中个人中心使用的是，而不是对应路径“/mine”。
2. 路由器类代码如下
import Vue from 'vue'
import Router from 'vue-router'
import mainpagefrom '@/view/mainpage.vue'
import home from '@/view/home.vue'
import about from '@/view/about.vue'
import mine from '@/view/mine.vue'
import login from '@/view/login.vue'
Vue.use(Router)
const router = new Router({
routes: [{
path: '/',
name: 'mainpage',
component: mainpage,
children: [{
path: '/',
redirect: 'mainpage'
},
{
path: '/home',
name: 'home',
component: home
},
{
path: '/about',
name: 'about',
component: about
},
{
path: '/mine',
name: 'mine',
component: mine
},
{
path: '/login',
name: 'login',
component: login
},
{
path: '/wode',
redirect: to=>{
var states = sessionStorage.getItem('state')
if(states==null){
return '/login'
}else{
return '/mine'
}
}
}]
}
]
})
在main的二级目录下，直接重定向home组件。path: '/wode’根据执行情况进行重定向，如果已经登录，则定位到mine组件，如果尚未登录定位login组件。
3. 运行，结果如下
首次打开页面，默认通过重定位进入到首页。首次点击个人中心，重定位到登录页面。
在不关闭浏览器情况下，点击个人中心，则直接进入我的页面
使用路由钩子重定向
【例】打开web系统，系统一级菜单包括首页、我的、关于三个菜单。进入系统首页，首页内容展示通知公告和产品列表内容，当用户点击“我的”子菜单或查看产品详情时，需要判断用户是否登录，如果没有登录则跳转到登录页面，否则直接进入相应对应的页面。
- 编写各个页面组件
首页home.vue代码
<template>
<div style="border:1px solid red;color:red;">
<p>通知公告</p>
<v-notice></v-notice>
<p>产品列表</p>
<v-product></v-product>
</div>
</template>
<script>
import noticelist from '@/view/noticeList.vue'
import product from '@/view/productList.vue'
export default {
name: 'home',
components:{
'v-notice':noticelist,
'v-product':product
}
}
</script>
<style>
</style>
在此引入了通知公告列表（noticeList）和产品列表（productList）两个组件。注意在components使用组件的在页面中文件的名的应用。如：noticelist在此页面中称v-notice。
通知公告noticeList.vue代码
<template>
<div>通知公告组件</div>
</template>
<script>
export default {
name: 'notices'
}
</script>
<style>
</style>
辅助演示的示意性代码。
产品列表productList.vue代码
<template>
<div>
<p v-for="item in products" v-bind:key="item.id">'序号：'{{item.id}} ' 商品：'{{item.name}}
<router-link to='productDetail'>详情</router-link>
</p>
</div>
</template>
<script>
export default {
name: 'product',
data() {
return {
products: [{
id: '1',
name: '帽子',
brand: '李宁'
}, {
id: '2',
name: '运动鞋',
brand: '安踏'
}]
}
}
}
</script>
<style>
</style>
在这里使用 详情，进入产品详情页面，再此可以使用query传参数给子组件。
我的productDetail.vue代码
<template>
<div>商品详情</div>
</template>
<script>
export default {
name: 'productDetail'
}
</script>
<style>
</style>
该组件仅给出示意代码，通过路由传参不在此演示。
我的login.vue代码
<template>
<div style="border:1px solid orange;color:orange;">
<h3>登录页面</h3>
<button @click="btnClick">登录</button>
</div>
</template>
<script>
export default {
name: 'login',
methods:{
btnClick(){
sessionStorage.setItem('state','yes')
var currUrl= sessionStorage.getItem('currURL')
this.$router.push({path:currUrl});
}
}
}
</script>
<style>
</style>
仅给出示意代码，当用户点击登录按钮时，将状态记录到sessionStorage中。
我的mime.vue代码
<template>
<div>这是我的组件</div>
</template>
<script>
export default {
name: 'about'
}
</script>
<style>
</style>
辅助演示的示意性代码
关于about.vue代码
```javascript
<template>
<div>这是关于组件</div>
</template>
<script>
export default {
name: 'about'
}
</script>
<style>
</style>
辅助演示的示意性代码
- 编写路由器类代码
import Vue from 'vue'
import Router from 'vue-router'
import home from '@/view/home.vue'
import about from '@/view/about.vue'
import mine from '@/view/mine.vue'
import login from '@/view/login.vue'
import productDetail from '@/view/productDetail.vue'
Vue.use(Router)
const router = new Router({
routes: [{
path: '/',
component: home,
},
{
path:'/about',
name:'about',
component:about
},
{
path:'/login',
name:'login',
component:login
},
/************需要登录验证的部分 *******************/
{
path:'/mine',
name:'mine',
component:mine,
meta: { checkoutLogin: true }
},
{
path:'/productDetail',
name:'productDetail',
component:productDetail,
meta: { checkoutLogin: true }
}
]
})
//3.利用钩子函数做登录验证
router.beforeEach((to, from, next) => {
if(to.path != "/login"){
sessionStorage.setItem('currURL',to.fullPath)
}
if(to.meta.checkoutLogin) { //需要登录校验的部分
var state = sessionStorage.getItem('state')
if(state==null || state=='undefine'){
router.push({ name: "login" })
} else{
next()
}
}else { //不需要登录校验的部分
next()
}
})
export default router
在代码中将需要验证的路由增加meta属性标识需要做登录验证。然后通过路有钩子beforeEach，判断是已经登录，如果登录则进入对应模块，如果没有登录进入登录界面。
3.运行验证
首次进入页面如下：
当点击产品详情或我的时，进入登录页面，界面如下
点击登录后，将登录状态记录到sessionStorage。再此转我的或则详情界面，则会直接进入。界面如下
路由别名
路由别名也是重定位一种用法，实际上和重定位无关，很多人拿alias和redirect进行比较，很牵强。路由别名就是不同的名称指向同一个组件，就如一个人，大名/person，外号王二狗，无论/person，还是王二狗都指的同一个人，在不同场合使用更合适。路由别名语法格式
routes=[{
path: '/person',
component: person,
alias:'王二狗'
}]
使用
<router-link to="王二狗">路由别名/a</router-link>
<router-link to="/person">路由别名/a</router-link>
这两种用法是一致的，王二狗好像比“/person”更切合语义一些
小结
路由重新定位是开发中最常用的技巧，所谓的路由重新定位，就是根据实际情况，同样的路径执行不同的组件，这个是重定位的主要用法。以上通过登录示例详细说明路由重新定位的用法。