路由介绍
Vue router是 Vue.js的官方路由管理器，用于构建单页面项目，在安装Vue-cli时，选择router即可安装，期间有一个是否启用history选项，可以先选择no,也就是hash模式，可以在配置中更改成history模式，安装后，npm run serve启动项目，会发现link,单页面链接，在hash模式下，链接地址前会有#号，改成history模式则没有#号
更改模式在：src/router/index.js里，设置options:
const router = new VueRouter({
mode ： 'history', //默认mode : 'hash'
routers
})
PS: 设置history模式，需要服务器环境配置的支持，手册已经给出各个服务的解决方案
PS：地址为：https://router.vuejs.org/zh/guide/essentials/history.mode.html
使用路由
安装了router路由的脚手架，多了两个目录，且配置和入口文件也发生了改变，先来分析下入口文件main.js，比之前多了引入和注册路由的内容；
引入路由
import router from './router'
new Vue({
//注册路由
router,
....
})
分析App.vue中路由的各种元素，搭配router/index.js
router-link标签
<router-link to='/'>Home</router-link>
<router-link to='/about'>About</router-link>
PS: 1. <router-link>是组件导航，会被渲染成<a>超链接标签
2. to属性是链接地址，会被渲染成href属性
const routers = [
{
path : '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
}
]
<router-link>对于的index.js部分，
//引入Vue.jsimport Vue from 'vue'
//引入vue-router.jsimport VueRouter from 'vue-router'
//引入Home组件import Home from '../views/Home.vue'
参数是一个插件，路由就是一个插件
初始化这个插件以便使用
Vue.use(VueRouter)
这个常量用于设置每个组件的信息，然后交给路由插件注册
const routers = [
{
path: '/', //链接地址
name: 'Home', //别名
component: Home //加载的组件
}，
{
path: '/about',
name: 'about', //另外一种组件加载模式，路由懒加载，
component: () => import('../views/About.vue')
}
]
实例化路由组件
const router = new VueRouter({
mode: 'hash', //默认mode : 'hash'
routers
})
导出路由
export default router
回到App.vue, 导航链接下方有一个空标签<router-view/>
<router-view/>渲染view目录下的页面组件，而components是功能性小组件
动态路由设置
所谓动态路由匹配：就是不确定的参数进行路由映射到同一组件上去，比如经典的：user?id: 5, 这个5就是动态的数值，最终路径：user/5
模式 匹配路径 $router.params
顺带说下vue-router传参的两种方式的区别（query和params）
query类似get请求，页面跳转后，会在地址栏上显示请求的参数
而 params 类似post请求，页面跳转后，地址栏上不会显示请求的参数信息
1. query传参的方式以及去接收参数
传参：
this.$router.push ({
path: '/list',
query: {
id: id
}
})
接收参数：
this.$route.query.id
2. params传参的方式以及去接收参数
传参：
this.$router.push({
name: 'list', //params里面只能是这种格式，不能是path:'/list'这种形式，因为params只能通过name来引入路由。
params: {
id: id
}
})
接收参数：
this.$router.params.id
/user/:id /user/5 { id : 5 }
/user/:id/post/:name /user/5/post/lee { id : 5, post : 'lee' }
创建user页面组件后，先采用query模式：user ? id = 5 ;
<template>
<h3>
User Id : {{$router.query.id}}
</h3>
</template>
如果要使用动态路由，先需要在path里配置相关路由规则，然后再获取；
{
path : '/user/:id',
name: 'User',
component : User
},
<template>
<h3>
User Id : {{ $router.params.id }}
</h3>
</template>
PS: $route对象的相关属性
创建两个不同参数但同一组件调用的链接，方便来回点击调试
<router-link to="/user/5">user/5</router-link>
<router-link to="/user/6">user/6</router-link>
由于动态路由访问的都是同一组件不同参数，组件会被复用以提升效率，可以通过watch监听对象，来监听$router(to,from)判断去处和来源；
有时路由不存在会得不到任何结果，可以设置捕获所有路由或404
{
path: '*',
name: 'Home',
component: Home
},
{
path: '/user-*',
name: 'Home',
component: Home
}
在App.vue中，创建script，来监听动态路由的变化；
<script>
export default {
watch : {
$route(to,from) {
console.log(to)
console.log(from)
}
}
}
</script>
嵌套路由的使用
嵌套路由的三种匹配方式，第一种是固定路由，二三种是两种动态路由：
模式 匹配路径
/news/music /news/music
/user/:id/profile /user/5/profile
/user/:id/posts /user/5/posts
可以在views目录下创建user目录，并分别创建UserProfile和UserPosts:
<template>
<h3>
UserProfile: {{ $route.params.id }}
</h3>
</template>
<template>
<h3>
UserPosts: {{ $route.params.id }}
</h3>
</template>
在route/index.js配置路由规则，在User组件中配置子路由；
{
path: '/user/:id',
name: 'User',
component: User,
children : [
{
path : 'profile',
component: UserProfile
},
{
path : 'posts',
component: UserPosts
}
]
}
注： 组件名称和路径设置的不一样，路由采用的是路径
子路由不需要 / , 因为斜杠会被当成根路径
在User.vue 这个父路由，需要使用视图渲染加载子路由：
<template>
<div>
<h3>
User Id : {{ $route.params.id }}
</h3>
</div>
</template>
注：<router-view>外层需要有一个元素标签，否则会报错
如果父路由，遇到没有可渲染的子路由，可以设置一个空路由
{
path : '*',
component : List
}
