Vue路由机制

Vue路由机制：通过组合组件来组成单页面应用（SPA）。将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在页面哪里渲染它们。

（1）组件

（2）路由-组件映射表

（3）创建VueRouter，并传入映射关系（routes配置）

（4）路由参数（router配置）注入Vue实例

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app') 

页面渲染（HTML）

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

（4）页面涉及路由的两种形式：

　　嵌套路由：通过routes里的children参数配置实现

　　同级布局：通过routes里components参数和<router-view>的name实现

<!-- UserSettings.vue -->
<div>
  <h1>User Settings</h1>
  <NavBar/>
  <router-view/>
  <router-view name="helper"/>
</div>

{
  path: '/settings',
  // 你也可以在顶级路由就配置命名视图
  component: UserSettings,
  children: [{
    path: 'emails',
    component: UserEmailsSubscriptions
  }, {
    path: 'profile',
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}

（4）API

　　this.$router ---  访问路由器；

　　this.$router.push()  路由器跳转，有history 记录；

　　this.$router.replace() 路由器跳转，无history 记录；

　　this.$router.go(n)  在 history 记录中向前或者后退多少步

　　this.$route --- 访问当前路由；

　　this.$route.params --- 当前路由携带参数；