参考书籍：《Vue2 实践揭秘》第三章：路由与页面间导航
一、文章目的
通过简单项目页面，入门学习vue-router配置。
二、搭建vue项目
nodejs：8.9.1 npm：5.5.1 vue：2.9.6
1、全局安装vue-cli
$ npm i vue-cli -g
2、创建项目
$ vue init webpack
$ npm run dev
运行【npm run dev】发现浏览器没有自动开启，打开config/index.js，修改“autoOpenBrowser: true”。
创建项目时，我们选择了安装vue-router，在src目录下能看到一个初始化的router/index.js路由配置文件。
三、项目分析并新建vue项目页面
从3-2图可以看到有六个vue文件：Main.vue、Home.vue、Category.vue、Cart.vue、Me.vue、Detail.vue。
a、修改App.vue文件：
b、在src文件夹下新建六个vue文件：
c、打开src/router/index.js，修改路由配置
d、此时查看浏览器，页面变了
点击链接，可以正常跳转，但是后面总是带个“#”号，修改router/index.js路由模式为‘history’：
e、现在，页面大概是我们想要的样子了，现在打包看看是否运行正常，运行：npm run build，复制dist下文件到本地服务器message二级目录，然后运行查看效果：
现在修改index.js配置文件，修改公共文件路径，不让从根目录进入：
重新打包，放到本地服务器message目录下，运行查看是否正常：
重新打包运行后，未报错，但是页面没有内容，查找原因是因为vue-router路由使用需要在服务器端做配置：
此时我们再重新运行：npm run build，打包并复制dist目录文件到message目录下，然后运行，终于看到打包后运行正常。
四、简单优化
上面页面运行正常，但是页面却很丑，代码编写也不够友好，下面就优化页面和代码。
a、代码优化：
将Navs拿出来放到一个新vue中，单独处理：
router-link，指向路径不够友好，这样以后路径改变可能要修改多个文件，使用“命名路由”：
F12审核元素，可以看到navs是用"a"标签包起来的，这里我们去掉"a"标签，直接用“li”：
去掉后退：
动态路由，携带参数：
b、页面优化
下载less，less-loader
新建Navs.less，并在Navs.vue中引入
导航状态选中样式：
出现一个问题，其他导航栏选中，首页也一直选中，修改首页为“精确匹配”：
设置404页面：
