介绍 Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为
对于初学者来说，对于上面的理解可能会有迷糊，不过没关系，我们先来直接使用一下它，慢慢感受下，然后再回来看一下这一些解释。
安装 vue-router 引入 vue-router 的方法有两种：
1 https://unpkg.com/vue-router/dist/vue-router.js
第二种：NPM
简单使用 首先，我们在vue-cli项目中的根目录中新建一个名称为router的文件夹，然后在文件夹中新建一个新的文件index.js。
项目目录如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 . |-- node_modules |-- public | |-- favicon. | |-- index.html |-- src | |-- assets | |-- components | | |-- HelloWorld.vue | | |-- v-about.vue | | |-- v-header.vue | | |-- v-index.vue | |-- router | | |-- index.js | |-- App.vue | |-- main.js |-- .gitignore |-- babel.config.js |-- package-lock.json |-- package.json |-- README.md .
router -> index.js 完整代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 // 引入 Vue import Vue from 'vue'; // 引入 vue-router import VueRouter from 'vue-router'; // 安装使用 vue-router Vue.use(VueRouter); // 引入首页 import vIndex from '../components/v-index.vue'; // 开始使用 vue-router let routes = new VueRouter({ routes: [ { path: '/', component: vIndex }, { path: '/about', component: () => import(/* webpackChunkName: "about" */ '../components/v-about.vue') }, ] }); // 提供接口给外面使用 export default routes;
在项目中应用 在上面，我们已经将路由配置写完了，那么接下来就是用到项目中去了。在前面的章节中，我们已经知道有main.js这么一个文件了，它的作用是程序入口文件，加载各种公共组件，那么我们接下来就更新下这一个文件吧。
main.js 完整代码：
1 2 3 4 5 6 7 8 9 10 11 12 import Vue from 'vue' import App from './App.vue' // 引入我们配置好的路由 import router from './router'; Vue.config.productionTip = false new Vue({ router, render: h => h(App), }).$mount('#app')
接着我们再更新下App.vue：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <template> <div id="app"> <v-header /> <router-view></router-view> </div> </template> <script> import vHeader from './components/v-header.vue' export default { name: 'App', components: { vHeader } } </script> <style> * { padding: 0; margin: 0; } #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; } </style>
多了一个<router-view />。
修改v-header文件，完整代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 <template> <div class="v-header"> <ul class="menus"> <li class="menu" v-for="item in menus" :key="item.id" > <router-link :to="item.path">{{ item.name }}</router-link> </li> </ul> </div> </template> <script> export default { name: 'v-header', desc: '头部信息', data() { return { menus: [ { id: 1, name: '首页', path: '/' }, { id: 2, name: '关于', path: '/about' }, ] } } } </script> <style scoped> .v-header { width: 100%; height: 70px; background-color: #fff; box-shadow: 3px 3px 3px #ddd; color: #333; } .menus { list-style: none; padding: 0 20px; overflow: hidden; } .menu { float: left; padding: 0 20px; height: 70px; line-height: 80px; transition: .3s; } .menu:hover { cursor: pointer; color: #0051ff; background-color: #efefef; } </style>
多了个<router-link :to="item.path">{{ item.name }}</router-link>。
总结 上一章出现的问题到了这里已经解决了，大家对于有些代码可能不是很明白，比如vue-router的格式和用法，这一些都会在后面再详细说一下，在这里我们只要能达到目的就可以了。另外，也希望大家能再看几遍项目的代码和目录结构。因为，看着看着说不定就熟悉了。