路由（vue-router）
作用:切换不同的路径，在不刷新页面的情况下，显示不同的组件给用户看
参考:https://router.vuejs.org/zh-cn/essentials/getting-started.html
安装：npm install vue-router --save-dev
前提:
导入 vue.js (import Vue fron 'vue')
导入 vue-router.js （import VueRouter fron 'vue-router')
全局使用vue-router ： Vue.use（VueRouter）
使用:
1`页面实现（html模版中） 
在vue-router中, 我们看到它定义了两个标签<router-link> 和<router-view>来对应点击和显示部分。<router-link> 就是定义页面中点击的部分，<router-view> 定义显示部分，就是点击后，区配的内容显示在什么地方。所以 <router-link> 还有一个非常重要的属性 to，定义点击之后，要到哪里去， 如：<router-link to="路径"></router-link>
2`js 中配置路由
首先要定义route, 一条路由的实现。它是一个对象，由两个部分组成： path和component.
path 指路径，component 指的是组件。如：{path:’/home’, component: home}
html模版步骤：
1. <router-link to="路径"></router-link>
2. <router-view></router-view>
js 中配置路由步骤：
1、 导入组件
import home from './components/home'
import about from './components/about'
2、 定义路由规则
我们这里有两条路由，组成一个routes:
const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About },
{path: '/',redirect: '/home'}// 重定向
]
最后创建router 对路由进行管理，它是由构造函数 new vueRouter() 创建，接受routes 参数。
const router = new VueRouter({
routes， // routes: routes 的简写
})
合并写法：const router = new VueRouter({
routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About },
{path: '/',redirect: '/home'}// 重定向
]})
3、 配置完成后，把router 实例注入到 vue 根实例中,就可以使用路由了
const app = new Vue({
router,
}).$mount('#app')
或：new Vue({
el:"#app", //vue监管的区域
router,
render:h=>h(App)
})
子路由
const router = new VueRouter({
routes = [
{ path: '/first', component: first,
children:[
{ path: '/first', component: firstFirst },
{ path: '/second', component: firstSecond }
]
},
{ path: '/about', component: About },
{path: '/',redirect: '/home'}// 重定向
]})
路由带参数传递
命名路由：
有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})
要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
获取传递的参数：{{$route.params.userId}}
命名视图：
有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。
html``
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
js``
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})
query传值：
<router-link :to="{path：'/users';query:{aaa:'bbb'} }">User</router-link>
获取值：{{$route.query.aaa}}
append: <router-link :to="about" append></router-link>
exact(相对路径): <router-link :to="about" exact></router-link>
alias别名
alias别名:
{ path: '/about', component: About,alias:'/aaa' },
{ path: '/about', component: About,alias:['/aaa','/bbb']},
<router-link :to="aaa">aaa</router-link>
路由钩子
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeRouteEnter: (to, from, next) => {
console.log(to);
console.log(from);
// next() //可以执行 next（false）//不可以
next（{path：'/aaa'}）
}
}
]
})
编程式导航
// 后退一步记录，等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
