介绍
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>
