详解Vue Router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

Vue中会使用官方提供的vue-router插件来使用单页面，原理就是通过检测地址栏变化后将对应的路由组件进行切换。
单页面应用就是用户通过某些操作更改地址栏url之后，动态的进行不同模板内容的无刷新切换，用户体验好。

简单路由的实现
通过指令npm install vue-router -S 安装插件
1、引入vue-router，如果是在脚手架中，引入VueRouter之后，需要通过Vue.use来注册插件

import Vue from 'vue
import VueRouter from 'vue-router'
Vue.use('VueRouter')

2、创建router路由器

new VueRouter({
	routes: [
		{
			psth: '/home',
			component: Home
		}
	]
})

3、创建路由表并配置在路由器中

const routes = [
        {path,component}//path为路径，component为路径对应的路由组件
    ]

    new Router({
        routes
    })

4、在根实例里注入router,目的是为了让所有的组件里都能通过this.$router、this.$route来使用路由的相关功能api

new Vue({
      el: '#app',
      router,
      template: '<App/>',
      components: { App }
    })

5、利用router-view来指定路由切换的位置

<div id="app">
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

6、使用router-link来创建切换的工具，会渲染成a标签，添加to属性来设置要更改的path信息，且会根据当前路由的变化为a标签添加对应的router-link-active/router-link-exact-active类名

<div id="app">
  <router-link to="main">main</router-link>
  <router-link to="news">news</router-link>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>
.router-link-active{
    color:red;
}

多级路由
在创建路由表的时候，可以为每一个路由对象创建children属性，值为数组，在这个里面又可以配置一些路由对象来使用多级路由。

const routes = [
	{path: '/main', component: Main},
	{path: '/news', component: News, children: [
			{path: '/inside', component: NewsInside},
			{path: '/outside', component: NewsOutside}
		]
	}
]

二级路由组件的切换位置依然由router-view来指定（指定在父级路由组件的模板中）

<router-link to='inside'>inside</router-link>
<router-link to='outside'>outside</router-link>

<router-view></router-view>

声明式导航
组件支持用户在具有路由功能的应用中（点击）导航。通过 to 属性指定目标地址，默认渲染成带有正确链接的 a 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。

	<!-- name是要跳转的路由的名字，也可以写path来指定路径 -->
    <!-- params是传路由参数 -->
    <!-- query传queryString参数 -->
    <!--active-class属性可以控制路径切换的时候对应的router-link渲染的dom添加的类名-->
    <router-link 
    	:to='{name:"detail",params:{id:_new.id},query:{content:_new.content}}'
    	active-class='active'>Go to detail
    </router-link>
  

编程式导航
可以通过 router 访问路由实例。因此你可以调用 this.$router.push。想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

<!--通过点击调用此方法进行传参-->
this.$router.push(`/detail/${id}`)

动态路由匹配
有的时候我们需要在路由跳转的时候跟上参数，路由传参的参数主要有两种：路由参数、queryString参数。
路由参数需要在路由表里设置

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

queryString参数不需要在路由表设置接收，直接设置？后面的内容，在路由组件中通过this.$route.query接收

//传参
<royter-link :to="'/user/'+data+'?title=文章一'"></router-link>
//接收参数
const User = {
  template: '<div>User {{$route.query.title}}</div>'
}

prop将路由与组件解耦
在组件中接收路由参数需要this.$route.params.id,代码冗余，现在可以在路由表里配置props：true

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

在路由自己中可以通过props:[‘id’]接收id参数去使用

命名路由
我们可以给路由对象配置name属性，这样的话，我们在跳转的时候直接写name:main就会快速的找到此name属性对应的路由，不需要写大量的urlpath路径。

<router-link
    v-for="nav in navs"
    :key="nav.id"  
    :to="{name:nav.name}"  
>
{{nav.title}}</router-link>

{path:"guonei",component:()=>import("@/views/Guonei"),name:"guonei"},
{path:"guoji",component:()=>import("@/views/Guoji"),name:"guoji"}

默认路由和重定向
当我们进入应用，默认像显示某一个路由组件，或者当我们进入某一级路由组件的时候想默认显示其某一个子路由组件，我们可以配置默认路由：

const routes = [
	{path:'',component:Main}
]

当我们需要进入之后进行重定向到其他路由的时候，或者当url与路由表不匹配的时候：

const routes = [
	{path:'/',redirect:'/main'}
	//当url与路由表不匹配的时候进入main页面
	{path:'*',redirect:'/main'},
]

路由模式
路由有两种模式：hash、history，默认会使用hash模式，但是如果url里不想出现丑陋hash值，在new VueRouter的时候配置mode值为history来改变路由模式，本质使用H5的histroy.pushState方法来更改url，不会引起刷新。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

history模式，会出现404 的情况，需要后台配置。
因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404

路由的懒加载
在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

{
  path: '/about',
  name: 'about',
  component: () => import('@/views/About')  //采用了路由懒加载方式
}

路由守卫
在某些情况下，当路由跳转前或跳转后、进入、离开某一个路由前、后，需要做某些操作，就可以使用路由钩子来监听路由的变化。
全局路由钩子

//全局路由的前置守卫
// to: Route: 即将要进入的目标 路由对象
// from:Router 当前导航正要离开的路由
router.beforeEach((to, from, next) => {
    //会在任意路由跳转前执行，next一定要记着执行，不然路由不能跳转了
  console.log('beforeEach')
  console.log(to,from)
  next()
})
//
router.afterEach((to, from) => {
    //会在任意路由跳转后执行
  console.log('afterEach')
})

单个路由钩子
只有beforeEnter，在进入前执行，to参数就是当前路由

routes: [
    {
      path: '/center',
      component: Center,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]

路由组件钩子

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