介绍

Vue Router 是 Vue.js 官方的路由管理器这是Vue Router的官方文档。

它的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

安装

使用 NPM

npm install vue-router

如果在模块化工程中使用路由，需通过vue.use()明确安装路由功能。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Vue Router + Vue.js 使用基本过程（模块化）

有了 Vue Router，Vue.js 创建单页面应用变得更简单。Vue.js 通过组合组件组成应用程序，当要添加 Vue Router 时，将组件（components）映射到路由（routes），然后告诉 Vue Router 在哪里渲染它们就可以。

// ./router/index.js
//1.导入 Vue 和 VueRouter 
import Vue from 'vue'
import VueRouter from 'vue-router'

//2.定义组件（可以 import 其他文件）
import VueRouterOne from 'VueRouterOne'
import VueRouterTwo from 'VueRouterTwo'

//3.调用 Vue.use(VueRouter)
Vue.use(VueRouter)

//4.定义路由（组件映射路由）
const routes = [
  {
    path: '/vueRouterOne ',
    name: 'vueRouterOne ',
    component: VueRouterOne 
  },
  {
    path: '/vueRouterTwo ',
    name: 'vueRouterTwo ',
    component: VueRouterTwo 
  }
]

//5.创建路由实例，配置路由
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})
export default router 

// main.js
//6.创建和挂载根实例
import Vue from 'vue'
import App from './App'
import router from './router'
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})

// VueRouterOne.vue 和 VueRouterTwo.vue
// 路由导航链接
<template>
    <div id="one">
        <router-link to="/vueRouterOne ">这是一个路由</router-link>
    </div>
</template>

<template>
    <div id="two">
        <router-link to="/vueRouterTwo ">这是另一个路由</router-link>
    </div>
</template>

// App.vue  渲染的位置
<template>
    <div id="app">
        <router-view />
    </div>
</template>