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