vue-router的简单介绍

Vue提供了插件机制，可以在全局添加一些功能，它们可以简单到几个方法，属性，也可以很复杂，例如我们项目中使用的element等。
接下来我们聊得是另外一种插件（与 Vue.js 内核深度整合，让构建单页应用易如反掌）的：前端路由和Vue-router
参考文献：
https://segmentfault.com/a/1190000011123089?utm_source=tag-newest 等

---

1.什么是路由

• 路由是由多个URL组成的，使用不同的URL可以相应的导航到不同的位置。

• 浏览器中对页面的访问是无状态的，在切换不同的页面时都会重新进行请求。vue和vue-router在切换页面时是没有重新进行请求的，使用起来就好像页面是有状态的：这其实是借助了浏览器的History API来实现的，这样可以使得页面跳转而不刷新，页面的状态就被维持在浏览器中了。

• vue-router中默认使用的是hash模式，也就是会出现如下的URL（URL中带有#号）：
  

  *

2.路由的两种安装方法

• 公开方法 install安装

MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = ...
// 2. 添加全局资源
Vue.directive('my-directive', {})
// 3. 添加实例方法
Vue.prototype.$myMethod = ...
}

• npm下载

npm install vue-router

3.路由的基本配置

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地加载插件（安装路由功能）
在项目文件夹下的 src 文件夹下的main.js文件内写入以下代码

    Vue.use(Navigation, {router})

下面是剩余路由的配置：
每个页面对应一个组件，也就是对应的.vue文件。
创建一个数组来制定 路由映射列表，每一个路由映射一个组件；
webpack会把每一个路由都打包为一个js文件，在请求该页面时，才去加载这也页面的js【按需加载】；
案例github

import Home from '../components/home/Home'
import Login from '../components/login/Login'
import Register from '../components/login/Register'
import Search from '../components/search/Search'
import Detailed from '../components/home/detailedlist/Detailedlist'
import Dlist from '../components/home/detailedlist/Dlist'

export default new Router({
  routes: [
    {path: '/',redirect:'home'},
    {path: '/home', component:Home},
    {path: '/login', component:Login},
    {path: '/register', component:Register},
    {path: '/search', component:Search},
    {path: '/detailedlist',component:Detailed},
    {path: '/dlist',component:Dlist},
  ].concat([{ path: '*', redirect: '/404', hidden: true }])

})

4.路由的基本使用

运行网页时，会根据当前的路由动态渲染不同的页面组件，路由切换时，切换的是挂载的组件，其他的内容不会变化

[图片上传失败...(image-4b2cb5-1552123249063)]

5.路由的两种跳转方法

方法一：【声明式】使用内置的如下：

Home
  

Home
  

Home
  

Home
  

User
// 此时路由如下定义，name也可为中文
const routes = [
 { path: '/user', component: user, name: 'user' }
];
  

Register

• router-link的replace属性

一个布尔类型，默认为false。如果replace设置为true，那么导航不会留下history记录，点击浏览器回退按钮不会再回到这个路由。

• router-link的tag属性

router-link默认渲染成a标签，也有方法让它渲染成其他标签，tag属性就用来设置router-link渲染成什么标签的。

• router-link的active-class属性

  上面说了被选中的router-link将自动添加一个class属性值.router-link-active，这个属性就是来修改这个class值的。

6.动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用『动态路径参数』（dynamic segment）来达到这个效果：
当我们在地址后面直接添加任意字符,我们会发现文档内容随着我们的更改而改变.

{
    path:"/two:id",
    component:{template:"#b"},
}

7.重定向和别名

• 重定向

注意：导航守卫并没有应用在跳转路由上，而仅仅应用在其目标上。在下面这个例子中，为 /a 路由添加一个 beforeEach 或 beforeLeave 守卫并不会有任何效果。

重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：

const -->
router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]})

重定向的目标也可以是一个命名的路由：const router = new VueRouter({

 routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]})

甚至是一个方法，动态返回重定向目标：const router = new VueRouter({

routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]})

• 别名

“重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，那么“别名”又是什么呢？/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]})

8.续篇：导航守卫

• 导航守卫的执行顺序是怎么样的？

  beforeRouteLeave < beforeEach < beforeRouteUpdate < beforeEnter < beforeRouteEnter < beforeResolve < afterEach

• 导航守卫中的next的用处？
  next的作用，使导航守卫队列的继续向下迭代

• 为什么afterEach守卫没有next？
  afterEach根本不在导航守卫队列内，没有迭代的next

• beforeEach是否可以叠加？
  beforeEach是可以叠加的，所有的全局前置守卫按顺序存放在beforeHooks的数组里面，

• 路由跳转经历了哪几部分？
  路由跳转的核心方法是transitionTo，在跳转过程中经历了一次confirmTransition，（beforeRouteLeave < beforeEach < beforeRouteUpdate < beforeEnter < 异步组件加载）这样顺序的queue为第一个，在第一个queue迭代完毕后，执行第二个（beforeRouteEnter < beforeResolve）这样顺序的queue，在执行完毕后，开始执行updateRoute，之后执行全局的afterEach守卫。最后完成路由的跳转。

自认为史上最不爱总结的懒惰虫，拜倒在自己薄弱的技术基础上，于是乎献出了自己的‘first time’。初来乍到，请多多指教。