路由重定向——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'
   }
}
]

【例】系统主页面包括导航栏和内容显示区两部分，导航栏包括首页、个人中心和关于三个组件，进入系统时页面内容显示区显示首页内容，执行个人中心页面，判断是否登录，没有跳转到登录页面。

1. 编写各个组件内容，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系统，系统一级菜单包括首页、我的、关于三个菜单。进入系统首页，首页内容展示通知公告和产品列表内容，当用户点击“我的”子菜单或查看产品详情时，需要判断用户是否登录，如果没有登录则跳转到登录页面，否则直接进入相应对应的页面。

1. 编写各个页面组件
   首页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>

辅助演示的示意性代码

2. 编写路由器类代码

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”更切合语义一些

小结

路由重新定位是开发中最常用的技巧，所谓的路由重新定位，就是根据实际情况，同样的路径执行不同的组件，这个是重定位的主要用法。以上通过登录示例详细说明路由重新定位的用法。