vue-router 详解

目录

 

介绍

使用方法

基础知识

导航守卫

 Keep-alive

---

介绍

vue-router是vue.js得官方路由管理器。

优点：体验好，不需要每次从服务器获取全部，快速得展示给用户

缺点：浏览器每次前进 / 倒退时都需重新发起请求；单页应用前进 / 倒退时无法记住滚动位置。

使用方法

• npm install vue-router -save
•   src 目录下 新建 router 目录，目录下新建 index.js

  //index.js
  import Vue from 'vue'
  import Router from 'vue-router'
  
  Vue.use(Router)
  
  export default new Router({
    routes: [
   
  
    ]
  })
  

   

• main.js中引用

  import Vue from 'vue'
  import App from './App'
  import router from './router'
  
  Vue.config.productionTip = false
  
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
  })
  

   

基础知识

• 路由跳转方式：<router-link to=""></router-link> 或  this.$router.push("");
• 动态路由匹配，以冒号开头

  import Vue from 'vue'
  import Router from 'Vue-router'
  import HelloWorld from './helloWorld'
  
  Vue.use(Router)
  
  export default new Router ({
  
      routes:[
          {
              //动态路径参数，以冒号开头，通过$router获取id
              path:'helloWorld/:id',
              //设置props：true时，可在helloWorld组件中设置props:['id'],直接使用this.id
              name:'HelloWorld ',
              component:HelloWorld 
      
          }
  
      ]
  
  })

   

• 编程式导航

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

  注意哦，如果使用path的时候不能用params传参，使用params传参时会被忽略，获取参数为undefined。

导航守卫

1.全局导航守卫。

参数：to: Route: 即将要进入的目标 路由对象

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

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

router.beforeEach((to,from,next)=>{})//前置守卫
router.beforeReslove((to,from,next)=>{})//解析守卫
router.afterEach((to,from)=>{})//后置守卫

 

2.路由独享守卫

独享守卫在全局导航前置守卫调用后再被调用，所以不会被全局守卫覆盖。

beforeEnter((to,from,next)=>{})

3.路由组件内独享守卫

beforeRouteEnter((to,from,next)=>{
    //进入路有前
    //在路由独享守卫调用后调用，不！能！获取组件实例this，组件实例还未被创建。
}) 
beforeRouteUpdate((to,from,next)=>{
    //(2.2) 路由复用同一个组件时
    // 在当前路由改变，但是该组件被复用时调用 可以访问组件实例 `this`
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。

}) 
beforeRouteLeave((to,from,next)=>{
    //离开当前路由时使用
    //可用‘this’

}) 

 Keep-alive

 缓存组件内部状态，避免重新渲染，它自身不会渲染一个dom元素，也不会出现在父组件的链中。

 属性：

include：匹配的 路由/组件 会被缓存

exclude：匹配的 路由/组件 不会被缓存

include和exclude支持三种方式来有条件的缓存路由：采用逗号分隔的字符串形式，正则形式，数组形式。正则和数组形式时需用 v-bind。exclude的优先级大于include，当两者同时存在时，include将失效。

缓存组件使用方式：

    <!-- 逗号分隔字符串 -->
    <keep-alive include="a,b">
      <component :is="view"></component>
    </keep-alive>
    
    <!-- 正则表达式 (使用 `v-bind`) -->
    <keep-alive :include="/a|b/">
      <component :is="view"></component>
    </keep-alive>
    
    <!-- 数组 (使用 `v-bind`) -->
    <keep-alive :include="['a', 'b']">
      <component :is="view"></component>
    </keep-alive>

路由中使用keep-alive：

<keep-alive include="a,b">
    <router-view></router-view>
</keep-alive>

匹配原则：

• 匹配组件的name选项，如果name选项不可用
• 匹配局部注册的名称
• 匿名组件，不可匹配。
• 只能匹配当前被包裹的组件，不能匹配其子组件
• 不会在函数式组件中正常工作，因为没有缓存实例