vue2.x：五、vue页面开发进阶版-路由之加强开发

注：本文皆为本人自己实际开发中的了解所得经验，如有不对之处欢迎诸位批评指点

vue页面开发进阶版-路由之加强开发

Vue 是一套用于构建用户界面的渐进式框架。
本教程均基于vue2.x的版本进行编写，搭建的脚手架是使用的@vue/cli 4，编译工具使用的是webStorm

1、vue嵌套路由

在实际项目中我们常会由多层嵌套的页面组合而成一个页面，例如常见的后台管理页面都是由页头、菜单、内容、页脚组成，而内容又是根据菜单或其他链接切换页面显示，而我们的项目中也不止一个后台管理页面，也会有登录页面、业务页面等等，这些又是一个层级的路由，这样的话就用到了我接下来要讲的嵌套路由。

在上一篇中我们也讲到了普通路由的配置方法，而嵌套路由的配置其实十分的简单，例如我们原来有个路由页面home，我要在她里面设置一下子路由可以在显示home页面大体内容的情况下，在指定位置显示子路由页面，这是没有加嵌套路由的配置：

import Home from '../views/Home.vue'

 const routes = [
  {
    path: '/', 
    name: 'Home', 
    component: Home 
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

添加嵌套路由就是在指定路由的元素中添加children，并在children中编写嵌套路由的路由配置数组：

import Home from '../views/Home.vue'

 const routes = [
  {
    path: '/', 
    name: 'Home', 
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
    children: [
      {
        path: 'test',
        name: 'test',
        component: () => import('@/views/test')
      },
     
      {
        path: 'test2',
        name: 'test2',
        component: () => import('@/views/test2')
      }
    ]
  }
]

@符号这是webpack设置的路径别名,通常是src这个根节点目录

这样的话我们在About.vue中也添加<router-view/>这个路由窗口标签，这样About页面中可以动态切换test和test2的页面，并且对应的url也会变成/about/test和/about/test2
About.vue:

<template>
    <div>
        About 页面
        <div id="nav">
            <router-link to="/about/test">test</router-link>&nbsp;&nbsp;&nbsp;
            <router-link to="/about/test2">test2</router-link>
        </div>
        <router-view/>
    </div>
</template>

注意的是在子路由的path中开头最好不要写/，也就是要写成path: 'test'，而不是写成path: '/test'，不然路由跳转的地址就要由<router-link to="/about/test"> 变成 <router-link to="/test">，当然这样不影响显示，但是当你的路由多了，很容易找不到想要的路由

2、vue路由访问拦截

在路由进行访问的过程中我们可能会对路由进行一些拦截操作比如是进行页面权限判断、登录判断、页面传参判断等等，所以在路由中有一个导航守卫的全局钩子，这些钩子都是需要在路由实例化后在创建，也就是在router/index.js中 new VueRouter后对实例化的对象创建钩子，目前主要用到的只有俩个：

① 前置钩子

顾名思义就是路由在访问跳转成功前会被这个钩子所拦截

使用的方式是：

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

• to: Route: 即将要进入的目标 路由对象
• from: Route: 当前导航正要离开的路由对象
• next: Function: 路由跳转的方法，如果不调用的话路由就无法跳转

在路由对象中会包含以下内容

{
	fullPath: "/about",
	hash: "",
	matched: [{…}],
	name: "About",
	params: {},
	path: "/about",
	query: {},
}

其中path、name、params、query就是我们常用的参数，当然有时候我们也会需要进行一些其他配置来指定这个路由是否有权限跳转，这事我们就需要用到路由元信息：meta，配置的方式为：

{
   path: '/about',
   name: 'About',
   meta :{
            id:1
        },
   component: () => import('../views/About.vue')
}

这样的话我们在钩子中的路由对象中也就可以看到meta这个路由元信息，实例：

const router = new VueRouter({
    mode: 'history', //路由页面应Url显示模式，有history和hash俩种模式，后面再将
    routes
})
router.beforeEach((to, from, next) => {
    console.log(to)
    console.log(from)
    next()
})

实际返回值：

② 后者钩子

顾名思义就是路由在访问跳转成功后会被这个钩子所拦截，但是这个钩子不会接受 next 函数也不会改变导航本身
使用的方式是：

const router = new VueRouter({ ... })

router.afterEach((to, from) => {
  // ...
})

3、vue路由动态添加

到目前为止我们所使用的路由配置都是在配置文件中写死的路由，也有人会因为一些需要做一些自定义的动态路由，可能相同的界面每个登录用户都不相同，这个时候我们就可以是用router的addRoutes方法去动态获取添加路由：

this.$router.addRoutes([
                {
                    path: 'test2',
                    name: 'test2',
                    component: () => import('@/views/children/test2')
                }
            ])

添加完的路由，我们就可以使用 this.$router.push() 进行路由访问了

4、vue路由切换过度特效

<router-view>是基本的动态组件，所以我们可以用vue的 <transition>组件给它添加一些过渡效果

其他动态效果也可以使用这个标签，例如图片轮询展示

基于当前路由与目标路由的变化关系，动态我们可以这样设置过渡效果：

<!-- 使用动态的 transition name -->
<transition :name="transitionName">
  <router-view></router-view>
</transition>

// 接着在父组件内
// watch $route 决定使用哪种过渡
watch: {
  '$route' (to, from) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  }
}

<style>
.slide-left-enter, .slide-right-leave-active {
  opacity: 0;
  -webkit-transform: translate(30px, 0);
  transform: translate(30px, 0);
}
.slide-left-leave-active, .slide-right-enter {
  opacity: 0;
  -webkit-transform: translate(-30px, 0);
  transform: translate(-30px, 0);
}
</style>

vue的 <transition>组件具体用法我会在后期讲解