一、路由Router
Vue Router 是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，加速构建单页面应用。包含功能有：
1 嵌套的路由/视图表
2 模块化的、基于组件的路由配置
3 路由参数、查询、通配符
4 基于Vue.js过度系统的视图过度效果
5 细粒度的导航控制
6 带有自动激活的CSS class 的链接
7 HTML5 历史模式或hash模式，在IE6中自动降级
8 自定义的滚动条行为
安装：
首先打开项目终端内
输入：
npm install vue-router --save-dev
因为路由是外部插件，因此我们还需要在项目中导入，在这之前我们要先确认成功下载router路由
步骤如下：
打开项目内node_modules文件夹，在内部找到 vue-router 即安装成功
确认成功安装后，在项目列表目录 src 下 创建 router 文件夹、在router文件夹下创建 index.js文件，用于配置路由的页面跳转。
附上router默认模板
1 import Vue from 'vue'
2 import VueRouter from 'vue-router'
3
4 Vue.use(VueRouter);
5
6 const routes = [
7 {
8 path: '/', //此处单引号内存放的是跳转路径
9 component: //此处是组件名称
10 },
11 ]
12 const router = new VueRouter({
13 routes
14 })
15
16 export default router
配置完路由后，一定要加上最末尾那句: export default router; 只有导出后才能在 main.js 内导入。
现在我们就来配置 main.js main.js中只需要将router导入即可。 main.js文件是vue项目的主配置文件，项目中需要的插件等都在这里 import 导入
如下图：
附上源码：
import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js' Vue.config.productionTip = false new Vue({
router,
render: h => h(App),
}).$mount('#app')
配置完 main.js 后，我们要用路由，那么就需要在 App.vue 中配置一下
App.vue文件是整个vue项目的主入口，而views视图层内的视图文件及components内的组件文件要想在界面上显示，必须得在App.vue文件内引用。
附上源码：
<router-link to="headerlogo">headerlogo</router-link>
<br /> <router-link to="headerNav">headernav</router-link>
<br /> <router-link to="footer">footer</router-link>
<router-view></router-view>
要引用到的视图组件必须用到这两个 重要标签： <router-link to="视图名"> <router-view>，前者用来链接路由，后者用来显示路由视图。
以上就是路由的下载与配置以及简单应用。
