[TOC] # 安装vue-router vue-router是一个插件包，所以我们还是需要用npm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令 ~~~ npm install vue-router --save-dev ~~~ 如果你安装很慢，也可以用cnpm进行安装，如果你在使用vue-cli中已经选择安装了vue-router，那这里不需要重复安装了 # router/index.js文件 我们用vue-cli生产了我们的项目结构，你可以在src/router/index.js文件，这个文件就是路由的核心文件 ~~~ import Vue from 'vue' //引入Vue import Router from 'vue-router' //引入vue-router import Hello from '@/components/Hello' //引入根目录下的Hello.vue组件 Vue.use(Router) //Vue全局使用Router export default new Router({ routes: [ //配置路由，这里是个数组 { //每一个链接都是一个对象 path: '/', //链接路径 name: 'Hello', //路由名称， component: Hello //对应的组件模板 } ] }) ~~~ 上边的代码中已经对每行都进行了注释，其实在这个路由文件里只配置了一个功能，就是在进入项目时，显示Hello.vue里边的内容代码 # 增加一个Hi的路由和页面 对路由的核心文件熟悉后，我们试着增加一个路由配置，我们希望在地址栏输入 http://localhost:8080/#/hi 的时候出现一个新的页面 看到了效果，我们看一下具体的操作步骤： * 在src/components目录下，新建 Hi.vue 文件。 * 编写文件内容，和我们之前讲过的一样，文件要包括三个部分`<template><script>`和`<style>`。文件很简单，只是打印一句话 ~~~ <template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script> export default { name: 'hi', data () { return { msg: 'Hi, jdxia' } } } </script> <style scoped> </style> ~~~ * 引入 Hi组件：我们在router/index.js文件的上边引入Hi组件 ~~~ import Hi from '@/components/Hi' ~~~ * 增加路由配置：在router/index.js文件的routes[]数组中，新增加一个对象，代码如下 ~~~ { path:'/hi', name:'Hi', component:Hi } ~~~ 通过上面的配置已经可以增加一个新的页面了 ~~~ import Vue from 'vue' //引入Vue import Router from 'vue-router' //引入vue-router import Hello from '@/components/Hello' //引入根目录下的Hello.vue组件 import Hi from '@/components/Hi' Vue.use(Router) //Vue全局使用Router export default new Router({ routes: [ //配置路由，这里是个数组 { //每一个链接都是一个对象 path: '/', //链接路径 name: 'Hello', //路由名称， component: Hello //对应的组件模板 },{ path:'/hi', name:'Hi', component:Hi } ] }) ~~~ 上面有vue图片是因为在App.vue ~~~ <template> <div id="app"> <img src="./assets/logo.png"> <router-view/> </div> </template> ~~~ 所有的路由都在img下面 # router-link制作导航 现在通过在地址栏改变字符串地址，已经可以实现页面内容的变化了。这并不满足需求，我们需要的是在页面上有个像样的导航链接，我们只要点击就可以实现页面内容的变化。制作链接需要`<router-link>`标签，我们先来看一下它的语法。 ~~~ <router-link to="/">[显示字段]</router-link> ~~~ 1. to：是我们的导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 to=”/” ， 2. [显示字段] ：就是我们要显示给用户的导航名称，比如首页 新闻页 明白了router-link的基本语法，我们在 src/App.vue文件中的template里加入下面代码，实现导航 ~~~ <p>导航 ： <router-link to="/">首页</router-link> <router-link to="/hi">Hi页面</router-link> </p> ~~~