前言
前端路由技术，利用history/hash 的方式，修改URL的内容，Vue-router就是提供前端路由功能的一个包。
这种用前端技术维护的一套路由规则，就叫前端路由，在Vue-router的编程应用中，一个路由规则就是一个对象{ path, component, redirect…}，对象里的component对应一个子组件。
1、安装
在项目demo下，开启一个shell，输入：
$npm install vue-router --save
安装完成后，查看demo下的package.json文件，查看依赖项是否有vue-router.
2、使用vue-router
先在demo/src下，创建一个目录，叫做router，以后将业务的路由规则全部写在里面。
在demo/src/router/index.js内配置所有的路由信息。
使用方法：
1、在index.js中，先导入vue-router模块
$import vueRouter from ‘vue-router’
2、在Vue里面，安装vue-router插件
$Vue.use(vueRouter)
3、创建vueRouter对象并填写路由规则
const router = new vueRouter({
routes:[ {} ],
mode: ‘history’
});
4、在demo/src下的main.js中，给Html中的vue实例传入router对象
main.js:
import router from ‘./router/index.js’
new Vue({
el:’#app‘，
router,
render: h=>h(App)
})
注意：要在index.js内，把router对象导出才行，export default router;
3、 vue-router高级用法
需求（嵌套路由）：在一个路由为/home下，点击某子组件，要求URL的路由变为/home/news，或者/home/messages
思路：利用vue-router的路由规则配置中的children属性，它是一个数组，里面是存有路由规则的对象。
例如：
const routes = [
{
path: '/home',
component: Home
children: [
{
path:'news',
component: News
},
{
path:'messages',
component: Messages
}
]
}
]
需求（默认路由）：要求进入到/home页面后，自动显示home组件的子组件news，而不是messages，即，进入/home页面，就看到news组件内容
思路：利用路由规则对象 { } 的redirect属性
const routes = [
{
path: '/home',
component: Home
children: [
{
path:'',
redirect:'news'
},
{
path:'news',
component: News
},
{
path:'messages',
component: Messages
}
]
}
]