笔记整理：关于VUE插件--Vue Router篇

一、Vue Router介绍

Vue Router 是Vue.js官方的路由管理器。让构建单页面应用变得易如反掌

前端配置路由的优缺点：

优点：响应速度快 不需要经服务器
缺点：
      不利于SEO
      使用浏览器后退键会重新发送请求，没有合理利用缓存

---

二、开始使用

1.安装vue-router

# 进入项目安装并保存到依赖上
$ npm i vue-router -S

2.准备路由配置文件router/index.js

.
├── App.vue              //父组件
├── main.js              //入口文件  
├── components
│   └── kid1.vue         //子组件
├── router               //路由
│   └── `index.js`       //路由配置文件
└── assets
    └── logo.png

3.配置引用插件

• (1) 编写router/index.js
  import引入插件；Vue.use使用插件；new Vuex.router 实例化一个Vuex对象；暴露出去

  //引入依赖
  import Vue from 'vue'
  import VueRouter from 'vue-router'
  
  //引入所有组件
  import Home from './views/Home.vue' 
  //使用插件
  Vue.use(VueRouter);
  
  //实例化 并暴露出去
  export default new VueRouter({
    mode:'history',//默认是hash模式。
    routes: [
      {
        path: "/",
        name: "Home", //可选
        component: Home //普通加载
      },
      {
        path: '/Foo',
        name: 'Foo',
        component: import('./Foo.vue') //路由懒加载 异步加载组件
      }, {
        path: '/admin/:userId', //配置动态路由
        name:'GoodsList',
        component: GoodsList,
        children:[//嵌套路由
          {
            path: 'detail',
            name:'detail',
            component: Detail
          }
        ]
      }
  
    ]
  })
  

• (2) 入口文件引入仓库 main.js
  单页面应用程序中 在入口文件引用，其下子组件就全都能获取调用。

  import Vue from 'vue'
  import router from './router' // 引入仓库
  
  //引入各种组件
  import App from './App'
  
  new Vue({
    el: '#app',
    router, // 挂载仓库
    components: { App },
    template: `<App/>`
  })

• (3) 使用路由

  # 实现跳转：
  1.标签式路由
      <router-link to="/foo" >Go to Foo</router-link> //渲染成`<a>` to内容要与路由配置的path匹配
      属性说明：
          to 目标路由 
          replace  变成replace模式，即不往history添加记录
          append   在to路径前添加基路径
          tag   渲染成什么标签如：<router-link to="/foo" tag="li">foo</router-link>  》渲染成 》<li>foo</li>
      
  -------------------------------------
  
  2.编程式路由
      vm.$router.push({path:""})
      vm.$router.replace()
      vm.$router.go()
      vm.$router.black()
      vm.$router.forward()
  
  # 路由视图：
  <router-view name=""></router-view>

三、动态路由的匹配

path配置	匹配路径	$router.params
/user/:username	/user/evan	{username:’evan'}
/user/:username/post/:post_id	/user/evan/post/123	{username:’evan’;post_id:’123'}
/user/*	user/1，user/2，userr/1/10 都能匹配	说明：通配符 (*)
/user-*	user-a	说明：匹配以 /user- 开头的任意路径

四、嵌套路由

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id', component: User,
      children: [
        // 当 /user/:id 匹配成功，
        // UserHome 会被渲染在 User 的 <router-view> 中
        { path: '', component: UserHome },
        // ...其他子路由
      ]
    }
  ]
})

五、编程式导航

$router.push() 跳转 并向history 添加新记录

$router.push("name") //字符串

$router.push({path:"name”}) //object

$router.push({path:”name?a=123”}) //参数直接跟问号 

$router.push({path:"name",query:{nums:123,class:9} })  也可以分开卸载query里

$router.replace() 跳转 但不会向history 添加新记录

$router.replace(location, onComplete?, onAbort?)
这个和push很像  但是这个不会向 history 添加新记录

$router.go(n) 向前几页或向后几页

$router.go(n) 向前几页或向后几页
$router.back()
$router.forward()

$router.resolve() 新窗口打开

   let routeUrl = this.$router.resolve({
     path: "/share",
     query: {id:96}
   });
   window.open(routeUrl.href, '_blank');

$router.addRoutes 动态添加路由规则

例如：vue权限管理

六、命名路由和命名视图:

命名路由： 给路由定义不同的名字，根据名字进行匹配；
<router-link v-bind:to="{ name: 'Cart'}">Cart</router-link>   <!-- 和路由配置的name保持一致 —>

命名视图： 给不同的router-view定义名字，通过名字进行对应组件的渲染；

七、导航守卫

参数to:目标路由, from:原本路由, next执行回调
其中 确保要调用next方法，否则钩子就不会被 resolved

• next() //进行管道中的下一个钩子
• next(false) //中断当前的导航
• next('/') 或者next({ path: '/' }) // 跳转到一个不同的地址
• next(error) //导航会被终止且该错误会被传递给router.onError()
• next(()=>{}) //自定义执行

全局守卫

const router = new VueRouter({ ... })
//全局守卫：进入to路由前执行
router.beforeEach((to, from, next) => {})

//全局解析守卫： 在导航被确认之前
router.beforeResolve((to, from, next) => {})
 
//全局后置钩子： 导航被确认执行，可以理解为导航完成时执行
router.afterEach((to, from) => {})

路由独享的守卫

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {}
    }
  ]
})

组件内的守卫

const Foo = {
  template: `...`,
  
  // 进入该路由之前。因为当守卫执行前，组件实例还没被创建 不！能！获取组件实例 `this`
  beforeRouteEnter (to, from, next) {},
  
  // 在当前路由改变时 eg :在 /foo/1 和 /foo/2 之间跳转的时候 
  beforeRouteUpdate (to, from, next) {},
  
  // 离开该路由之前
  beforeRouteLeave (to, from, next) {}
}

八、其他

使用<transition>组件过渡动画

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

watch监听$route变化

// 接着在父组件内
// 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'
  }
}

使用<keep-alive>缓存组件，不重新加载

• include- 字符串或正则表达式。白名单。
• exclude- 字符串或正则表达式。黑名单。
• max- 数字。最多可以缓存多少组件实例。

---

参考资料：
官网: https://router.vuejs.org/zh/
路由守卫:https://blog.csdn.net/bingqis...
使用Vue-Router 2实现路由功能:https://blog.csdn.net/sinat_1...