少侠请重新来过 - Vue学习笔记(七) - Vue-router

Vue Router

Vue Router 是 Vue.js 官方的路由管理器。

Vue Router是什么

Vue Router是一个SPA的路径管理器，它和 Vue.js 的核心深度集成，适合用于构建单页面应用。Vue的单页面应用是基于路由与组件，路由用于访问路径，将路径跟组件映射起来。其本质是组件之间的切换，建立一个url跟页面之间的映射关系。

Vue Router的两种模式

通过配置mode选项来指定哪种模式，默认是使用hash模式

new Router({
  mode: 'history'
})

• Hash
  • hash(#)是URL的锚点，代表网页中的一个位置，通过改变#后面的部分，页面不会重新加载，会触发hashChange事件，通过监听该事件，获取hash值，再渲染不一样的页面，同时会给浏览器的访问历史加入一个纪录，可以使用后退前进。
• History
  • History模式是通过HTML5的History对象来实现的，url看起来就像普通网站一样，通过/分割，但是页面没有跳转，但是这种模式需要服务端的支持，服务端接收到所有请求，都指向同一个html文件，不然会出现404。如果服务端支持后，服务端将不会返回404错误。

动态路由匹配

一个或者多个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。

import demo1 from '@/views/demo1'
Vue.use(Router)
export default new Router({
  mode: 'history',
  routes: [
    {
    // 动态路径参数 以冒号开头
      path: '/demo1/:id',
      name: 'demo1',
      component: demo1
    }
  ]
})

模式	匹配路径	$route.params
/demo1/:id	/demo1/1	{ id: 1 }
/demo1/:id/name/:name	/demo1/1/name/xy	{ id: 1, name: 'xy' }

响应路由参数的变化

当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。 复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象

//vue实例中
 watch:{
    '$route':function(to,from){
        console.log('watch-$route');
        console.log(to);
        console.log(from);
    }
},

或者使用 beforeRouteUpdate 导航守卫

//vue实例中
beforeRouteUpdate (to, from, next) {
    // ...
    console.log('beforeRouteUpdate');
    console.log(to);
    console.log(from);
},

匹配优先级

同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。

嵌套路由

嵌套路由，为了实现下图的结构，先在app.vue中放置一个顶层的router-view，然后在demo5中放置一个嵌套的router-view，在路由设置中给VueRouter的参数中使用children配置。

要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。

// 参考 https://router.vuejs.org/zh/guide/essentials/nested-routes.html
/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+
// index.js
import Vue from 'vue'
import Router from 'vue-router'
import demo5 from '@/views/demo5'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/demo5/:id',
      name: 'demo5',
      component: demo5,
      children:[
        {
          path: 'com1',
          name: 'com1',
          component: {
            template: '<div>com1</div>'
          }
        },
        {
          path: 'com2/:comId',
          name: 'com2',
          component: {
            template: '<div>com2 {{ $route.params.comId }}</div>'
          }
        }
      ]
    }
  ]
})

<!--app.vue-->
<template>
  <div id="app">
    <router-link to='/demo5/1/com1'>demo5/1/com1</router-link>
    <router-link to='/demo5/1/com2/2'>demo5/1/com2/2</router-link>
    <router-view/>
  </div>
</template>
<!--demo5.vue-->
<template>
    <div>
        <h2>{{$route.params.id}}</h2>
        <router-view></router-view>
    </div>
</template>

编程式导航

除了可以使用 <router-link> 创建 a 标签来定义导航链接，还可以通过调用router的实例方法，通过编写代码来实现跳转

• router.push(location, onComplete?, onAbort?)
  • location 可以是一个字符串路径，也可以是一个描述地址的对象
  • onComplete 跳转成功之后的回调
  • onAbort 中止回调

  // 字符串
  router.push('home')
  // 对象
  router.push({ path: 'home' })
  // 命名的路由
  router.push({ name: 'user', params: { userId: 123 }})
  // 带查询参数，变成 /register?plan=private
  router.push({ path: 'register', query: { plan: 'private' }})
  

• router.replace(location, onComplete?, onAbort?)
  • 与上面的方法跳转方式一致，区别是它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
• router.go(n)
  • 这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步

命名路由

通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

命名视图

命名视图是指在同级页面中展示多个视图，而不是嵌套展示。

// index.js
new Router({
  routes: [
    {
      path: '/demo6',
      name: 'demo6',
      components: {
        default:demo6,
        a:demo3,
        b:demo2
      }
    }
  ]
})

<!--app.vue-->
<template>
  <div id="app">
    <router-view ></router-view>
    <router-view name="a"></router-view>
    <router-view name="b"></router-view>
  </div>
</template>

嵌套命名视图

/settings/emails                                       /settings/profile
+-----------------------------------+                  +------------------------------+
| UserSettings                      |                  | UserSettings                 |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
| | Nav | UserEmailsSubscriptions | |  +------------>  | | Nav | UserProfile        | |
| |     +-------------------------+ |                  | |     +--------------------+ |
| |     |                         | |                  | |     | UserProfilePreview | |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
+-----------------------------------+                  +------------------------------+

// index.js
new Router({
  routes: [
   {
      path: '/demo7',
      name: 'demo7',
      component:demo7,
      children:[
        {
          path: 'a',
          component:  {
            template: '<div>a</div>'
          }
        },
        {
          path: 'b',
          components: {
            default: {
              template: '<div>default</div>'
            },
            b: {
              template: '<div>b</div>'
            }
          }
        }
      ],
    }
  ]
})

<!--demo7.vue-->
<template>
    <div>
        <h2>demo7</h2>
        <router-view></router-view>
        <router-view name='b'></router-view>
    </div>
</template>

重定向和别名

• 重定向是通过 routes 配置 redirect 来完成。当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，

{
  path: '/demo4/:id',
  name: 'demo4',
  component: demo4,
  redirect:to=>{
    console.log(to);
    return '/demo1/' + to.params.id
  }
}

• 别名是是通过 routes 配置 alias 来完成/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

{
  path: '/demo3',
  name: 'demo3',
  component: demo3,
  alias:'/demo2'
}

路由组件传参

• 布尔模式 为了避免在组件中多次使用 $route ，使之与其对应路由形成高度耦合，可以通过设置组件的props进行解耦

{
  path: '/demo1/:id',
  name: 'demo1',
  component: demo1,
  props:true
}

• 对象模式 如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。

{
  path: '/demo2',
  name: 'demo2',
  component: demo2,
  props:{
    path:'demo2'
  }
},

• 函数模式 你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。

{
  path: '/demo1/:id',
  name: 'demo1',
  component: demo1,
  props:(route)=>{
    return {
      fId:"f"+route.params.id
    }
  }
}

导航守卫

路由正在发生改变，vue-router提供了导航守卫来通过跳转或取消的方式守卫导航，有多种植入导航钩子。 守卫方法 接收三个参数

• to: Route: 即将要进入的目标 路由对象

• from: Route: 当前导航正要离开的路由

• next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

  • next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
  • next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
  • next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
  • next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保要调用 next 方法，否则钩子就不会被 resolved。

• 全局守卫
  • router.beforeEach 当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。

  router.beforeEach((to,from,next)=>{
    console.log(to);
    console.log(from);
    next()
  })
  

• 全局解析守卫
  • router.beforeResolve 在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

  router.beforeResolve((to,from,next)=>{
    console.log(to);
    console.log(from);
    next()
  })
  

• 全局后置钩子
  • router.afterEach 导航跳转之后调用，不会接受 next 函数也不会改变导航本身

   router.afterEach((to,from)=>{
    window.scrollTo(0,0)
  })
  

• 路由独享守卫
  • 你可以在路由配置上直接定义 beforeEnter 守卫

  {
    path: '/demo1/:id',
    name: 'demo1',
    component: demo1,
    beforeEnter: (to, from, next) => {
      console.log('beforeEnter');
      next()
    }
  }
  

• 组件内守卫 路由组件内直接定义以下路由导航守卫
  • beforeRouteEnter 守卫 不能 访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
  • beforeRouteUpdate 在当前路由改变，但是该组件被复用时调用
  • beforeRouteLeave 这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

  beforeRouteEnter (to, from, next) {
      // 在渲染该组件的对应路由被 confirm 前调用
      // 不！能！获取组件实例 `this`
      // 因为当守卫执行前，组件实例还没被创建
      console.log('beforeRouteEnter');
      console.log(this);
      next(vm=>{
          console.log('vm');
          console.log(vm);
      })
  },
  beforeRouteUpdate (to, from, next) {
      // 在当前路由改变，但是该组件被复用时调用
      // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
      // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
      // 可以访问组件实例 `this`
      // ...
      console.log('beforeRouteUpdate');
      console.log(this.id);
      console.log(to);
      console.log(from);
      next()
  },
  beforeRouteLeave (to, from, next) {
      // 导航离开该组件的对应路由时调用
      // 可以访问组件实例 `this`
      console.log('beforeRouteLeave');
      console.log(this);
      next()
  
  },
  

完整的导航解析流程

路由元信息

定义路由的时候可以配置 meta 字段

 {
  path: '/demo5/:id',
  name: 'demo5',
  component: demo5,
  meta:{
    title:'demo5'
  },
  children:[
    {
      path: 'com1',
      name: 'com1',
      component: {
        template: '<div>com1</div>'
      },
      meta:{
        title:'demo5-com1'
      },
    }
  ]
}
//通过 .meta访问

过渡动效

直接使用Vue过渡组件，如果需要每个路由不一样的过度效果，可以通过在路由组件使用transition并设置不一样的name值。 基于路由的动态过渡，可以在父组件中监听 $route

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

滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    console.log(savedPosition);
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
}

异步滚动可以通过返回一个Promise，一般用于配合过渡效果。

scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    return new Promise((resolve,reject)=>{
      this.timeout = setTimeout(() => {
        let obj = savedPosition ? savedPosition : { x: 0, y: 0 }
        clearTimeout(this.timeout)
        resolve(obj)
      }, 500);
    })
  }

路由懒加载

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

首先，可以将异步组件定义为返回一个 Promise 的工厂函数 const Foo = () => Promise.resolve({ /* 组件定义对象 */ })

Vue Router跳转方式

• 直接修改url参数
• 声明式跳转：在页面中写 <router-link to='/index'>index</router-link>
• 编程式跳转：在Vue实例内部调用 $router.push(location, onComplete?, onAbort?)