vue-router

千锋逆战班，Rayson.Jin学习打卡！
今天给大家介绍一下vue-router。

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

一、实现简单的路由

安装

cnpm install vue-router -S or yarn add vue-router -S

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

import Vue from 'vue'
//1.引入插件vue-router
import Router from 'vue-router'
//2.注册插件
Vue.use(Router)  

2.创建router路由器

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

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

const routes = [
        {path,component}//path为路径，component为路径对应的路由组件
    ]
    const router = new Router({
        routes
    })
    //把创建好的router暴露出去
    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来指定路由切换的位置
路由跳转即push时会根据你push的path驱动相应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>

.router-link-active{
    color:red;
}

router-link详解

二、路由的懒加载

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

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

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

三、多级路由

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

// 配置路由
const router = new VueRouter({
  routes:[
    {path:'/',component:Home},
    {path:'/works',component:Works,name:'WorksLink',
      //配置多级路由，在children数组里添加子路由信息
      children:[
        {path:'/work1',component:work1},
        {path:'/work2',component:work2},
        {path:'/work3',component:work3}
      ]
    },
    {path:'/about',component:About},
    {path:"*",redirect:'/'} //默认跳转
  ],
  mode:'history'
})

2.在Works组件中引用并创建跳转链接

<!-- 创建路由跳转 -->
        <ul>
            <li><router-link to="work1">Work1</router-link></li>
            <li><router-link to="work2">Work2</router-link></li>
            <li><router-link to="work3">Work3</router-link></li>
        </ul>
        <!-- 引用路由 -->
        <router-view></router-view>

四、默认路由和重定向

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

{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’]