vue-router 简概

(梳理复习，很基础很简略，学习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',   //设置  激活后 的 类名
})

// 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标签展示 

路由1
路由2

     

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.     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(...)来实现路由导航，来代替 声明式 的导航
编程式： 意思通过编写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(...)                       能(添加)
this$router.replace(...)           不能(不添加)

回退
this.$router.back()
this.$router.go(-1)
前进
this.$router.go(1)