浅谈vue-router

浅谈vue-router

现在的大部分应用都流行SPA应用（single page application）。

SPA与传统的MPA的最大的不同的就是SPA使用的是单页面结构而传统的MAP使用的就是多页面结构。

MPA需要切换内容的时候往往会进行单个的页面的html的文件的跳转，这个时候受网络，性能的影响，浏览器会出现不定时间的空白界面，用户体验不好。

单页面应用就是用户通过某些操作更改地址栏url之后动态的进行动态的进行不同模板内容的无刷新状态，用户体验好。

Vue中会使用官方提供的Vue-router插件来使用单页面，原理就是检测地址栏变化后将对应的路由组件进行切换（卸载与安装）。

MPA与SPA

简单的路由的实现

cnpm install vue-router -S
或者
yarn add vue-router -S
在命令行中使用以上代码安装vue-router

1. 引入vue-router,如果在脚手架中，引入vueRouter之后，需要通过Vue.use来注册插件router/index.js文件。

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

2. 创建Router路由器

new Router({
	routes:[
	{path:"/path",	component:Home}
	]
})

3. 创建路由比匹配在路由器中

var routes = [
	{path,component} //path为路径,component为对应的路由器
]
var router = new Router({
	routes
})
export default router

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

 import router from "./router"
	new Vue({
	 el: '#app',
	 router,  //注册一下  让组件可以通过this.$router or this.$route 
	 			使用路由相关的api属性或方法
	 template: '<App/>',
 	 components: { App }
    })

5. 利用router-view来指定切换的位置
6. 使用router-link来创建切换的工具，默认是渲染成a标签，可以通过添加to属性来设置要更改的path信息，且会更具当前路由的变化为a标签添加对应的router-link-active/router-link-exact-active（完全匹配成功）类名。

<router-link to="/main">main</router-link>
<router-link to="/news">news</router-link>

<style>
.router-link-active{
    color:red;
}
</style>

多级路由

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

const routes = [
  {
  path:'/main',
  component:AppMain
  },
  {path:'/news',
  component:AppNews,
  children:[
    {path:'inside',component:AppNewsInside},
    {path:'outside',component:AppNewsOutside}
 	 ]
  },
]

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

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

	<router-view></router-view>
</template>

声明式导航router-link

router-link 组件支持路由功能的应用中点击导航。通过to属性指定目标地址，默认渲染成带有超链接的标签，可以通过配置tag属性生成别的标签，另外，当目标路由成功激活时，链接元素自动设置一个表示激活的CSS类名。router-link标签的to属性，默认写的时path（路由的路劲),可以通过设置一个对象来匹配更多。

:to=’{name:“detail”,params:{id:_new.id},query:{content:_new.content}}’

name是要跳转的路由名字，也可以写path来指定路劲，但是用path的时候就不可以用params来传参，params是用来传递路由参数的，query传queryString参数,replace属性可以控制router-link的条状不被记录，active-class属性可以控制路径切换的时候对应的router-link渲染的dom添加的类名。

编程式导航

有的时候需要在跳转前进行一些动作，router-link直接跳转，需要在方法里使用$router的方法

this.$router.push()

默认路由和重定向

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

{path:"’,component:Main}

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

{path:'/',redirect:'/main'}
///...放在最下面
{path:'*',redirect:'/main'},

命名路由

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

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



//router/index.js的配置
var router = new VueRouter({
	routes:[
		{
			path:"XXXX",
			component:XXXX,
			children:[
				{path:"guonei",component:()=>import("@/views/Guonei"),name:"guonei"},   
				{path:"guoji",component:()=>import("@/views/Guoji"),name:"guoji"}
			]
		}
	]
})


<script>
	export default {
		data(){
			return {
				navs:[
					{id:1,title:"国内新闻",name:'guonei'},				
					{id:2,title:"国际新闻",name:'guoji'}				
				]			
			}
		}
	}
</script>

动态路由的匹配

有的时候在路由跳转的时候跟上参数，路由传参的参数主要有两种：路由参数，queryString参数。
路由参数需要在路由表里设置

{path:'/user/:id',component:User}

上面的代码就是给User接收id的参数，多个参数继续在后面设置
在组建中可以通过this.$route.params来使用。queryString参数不需要在路由表设置接收，直接设置？后面的内容，在路由组件中通过this.$route.query接收。

<div class="nowplaying">
        正在热映....
        <!-- <ul>
            <li 
                v-for="data in datalist"
                :key="data"
                @click="toDetail(data)"
            >{{data}}</li>
        </ul> -->

        <!-- <ul>
            <router-link
                v-for="data in datalist"
                :key="data"
                :to="'/detail/'+data+'?title=文章一'"
                tag="li"
            >{{data}}</router-link>
        </ul> -->

        <ul>
            <router-link
                v-for="data in datalist"
                :key="data"
                :to="{
                    name:'detail',
                    params:{id:data},
                    query:{title:'文章二'}                     
                }"
                tag="li"
            >{{data}}</router-link>
        </ul>
    </div>
    
    
    <script>
      data(){
            return {
                datalist:["1111","2222","3333"]
            } 
        }
    </script>

router.js

 {
    name:"detail",
    path:"/detail/:id",
    component:Detail
  }

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

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

在路由自己中可以通过props接收id参数去使用了

props:[‘id’]

路由模式

为了构建SPA(单页面模式），需要引入前端路由系统，这也就是Vue-router存在的意义。前端路由的核心，就在于——改变视图的同时也不会向后端发送请求。

路由有两种模式：hash 与 history。默认是使用hash模式。单url如果不想出现丑陋的hash值，在new VueRouter的时候配置mode值为history来改变路由模式，本质使用H5的histroy.pushState方法来更改url，不会引起刷新。
history模式，会出现404 的情况，需要后台配置。
因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。
所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

路由原理
hash路由 => window.onhashchange监听路径的切换
history路由 => window.onpopstate监听路径的切换

路由的懒加载（延迟加载）

懒加载也称延迟加载，及在需要的时候进行加载。在单页面应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大也就造成进入首页的时候，需要加载的内容过多，演时过长，也就造成了用户的体验及其的差。
而在运用懒加载的时候，就可以将页面进行划分，需要的时候就加载页面，可以有效的分担首页加载时所承担的压力，减少首页的加再用时。

非按需加载则会把所有的路由组件的js包大在一起，当业务包很大的时候建议用路由的按需加载（懒加载）。按需加载则会在页面第一次请求的时候把相关的路由组件块的js添加上；

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

路由守卫

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

全局路由钩子

//进入到某个路由组件之前
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: '/foo',
      component: Foo,
      //当进入到foo路由之前，就会触发
      beforeEnter: (to, from, next) => {
        // ...
        next() //必须要执行next之后，对应的Foo组件才可以正常显示出来
      }
    }
  ]

路由组件钩子：

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