(梳理复习，很基础很简略，学习vue-router推荐去看官方文档)
文档参考： Vue Router
1.路由概念（感觉还很模糊）
路由——url的分层解析。（确定端与端的通信路径）
第一层 解析到服务器目标机器。这个通常是域名或ip。
第二层 解析到服务器的特定资源文件。这个通常是pathinfo。
第三层 解析特定资源的特定状态。包含在pathinfo参数中。
主要是服务器，资源文件，特定状态定位。
在vue中，路由 确定url与路由组件间的通信路径（一种映射），且可数据交互
2.安装和基本使用
安装
npm i vue-router -S
使用
// 1.引用
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 2.创建路由实例
export default new VueRouter({
routes: [ // 3.配置 routes
{ path: '/a', component:A } // 配置之前需创建路由组件 A.vue
]，
linkActiveClass: 'myActiveClass', //设置 <router-link> 激活后 的 类名
})
// 4.在main.js 的 Vue实例 中注册路由
import Vue from 'Vue'
import router from './router/index.js' // ./router/index.js(路由文件路径)
export default new Vue({
el: '#app',
router // 注册路由器
})
// 5.通过HTML标签展示
<!-- 路由链接 -->
<router-link to="path1">路由1</router-link>
<router-link to="path2">路由2</router-link>
<router-view></router-view> <!-- 路由容器 -->
3.路由的嵌套
在 routes 中
routes: [
{
path: '/parent',
component: Parent,
alias: '/p', // 路径别名
children: [ // 嵌套的子路由
{path: '/parent/son1', component: Son1} // path的一种方式
{path: 'son2', component: Son2} // path的另一种方式
]
}
]
4.向路由组件传输数据
数据 从 路由器模块（index.js） ， 传输到路由组件
$route"当前路由
1.获取参数方式 2.<router-link to="/a"> 3.{path: '/a', component: A}
通过$route.query --- to="/a?id=参数'&name=参数'" --- path: '/a'
通过$route.params --- to="/a/id的参数/name的参数'' --- path: '/a/:id/:name' (占位符)
注：参数为变量 to="..." 需改变(用 : 绑定to） :to=`/a?id=${变量}` :to=`/a/${变量}`
5.编程式的路由导航
借助 router 的方法router.push(...)来实现路由导航，来代替 声明式 <router-link :to="..."> 的导航
编程式： 意思通过编写JS代码（实现功能）
router.push() 方法
// 字符串
router.push('a')
// 对象
router.push({ path: '/a' })
// 命名的路由
router.push({ name: '/a', pramas: { id: 123 }}) // -> /a/123
// 带参数
router.push({ path: '/a', query: { id: 123 }}) //->/a?id=123
在 Vue 实例内部,通过this.$router访问路由实例
编程式 声明式 能否回退(向 history 添加新记录)
this$router.push(...) <router-link :to="..."> 能(添加)
this$router.replace(...) <router-link :to="..." replace> 不能(不添加)
回退
this.$router.back()
this.$router.go(-1)
前进
this.$router.go(1)
