路由重定向——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. 运行,结果如下
路由重定向——vue路由(四)_第1张图片
首次打开页面,默认通过重定位进入到首页。首次点击个人中心,重定位到登录页面。
路由重定向——vue路由(四)_第2张图片
在不关闭浏览器情况下,点击个人中心,则直接进入我的页面
路由重定向——vue路由(四)_第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>

辅助演示的示意性代码

  1. 编写路由器类代码
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.运行验证
首次进入页面如下:
路由重定向——vue路由(四)_第4张图片
当点击产品详情或我的时,进入登录页面,界面如下

路由重定向——vue路由(四)_第5张图片
点击登录后,将登录状态记录到sessionStorage。再此转我的或则详情界面,则会直接进入。界面如下
路由重定向——vue路由(四)_第6张图片

路由别名

路由别名也是重定位一种用法,实际上和重定位无关,很多人拿alias和redirect进行比较,很牵强。路由别名就是不同的名称指向同一个组件,就如一个人,大名/person,外号王二狗,无论/person,还是王二狗都指的同一个人,在不同场合使用更合适。路由别名语法格式

routes=[{
 path: '/person',
 component: person,
 alias:'王二狗'
}]

使用

  <router-link to="王二狗">路由别名/a</router-link>
  <router-link to="/person">路由别名/a</router-link>

这两种用法是一致的,王二狗好像比“/person”更切合语义一些

小结

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

你可能感兴趣的:(前端开发技术,vue)