为什要使用Vue Router？
在传统的web网页里想要访问页面中不同的功能模块，通常需要变换url来切换不同的html，这样每次加载html都会消耗一定的时间，如果这种访问页面的方式用在webapp上，会非常影响体验。那能不能像原生app一样可以迅速切换不同功能页面呢？Vue Router就实现了SPA（单页面应用），根原生app一样可以迅速切换不同功能页面而不需要加载时间。
SPA缺点
1.不利于SEO，因为单页面的html文件只是一个空壳文件，它里面的所有内容都是通过ajax请求获得的，这样一来搜索引擎就无法抓取网页的关键内容。
解决办法：服务端渲染SSR
2.首屏渲染时间长
解决办法：预渲染（适用于静态站点，如：关于我们、联系方式）
也可以使用Nuxt.js来解决以上缺点，这里不做介绍，感兴趣的同学可以查阅相关文档。
Vue Router的实质
我们在使用vue编写页面的时候通常都会用到组件，通常我们会把定义好的组件用定义标签的方式引入到页面中，但是这种引入方式不够灵活，Vue Router的作用就是能让我们动态的引入我们需要的组件。
如何使用Vue Router
1.npm安装路由（前提是已经掌握了npm包管理工具）
cnpm install vue-router --save //建议用cnpm镜像来安装
2.在项目src文件夹中创建router文件夹，在router文件夹中创建router.js文件
目录.png
3.在router.js中配置路由
配置路由之前要先创建路由所要引入的动态组件
组件.png
router.js中代码如下：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import demo1 from '../components/demo1'
import demo2 from '../components/demo2'
/*配置路由*/
const routes=[
{path:"/demo1",component:demo1},
{path:"/demo2",component:demo2}
]
/*实例化路由*/
const router = new VueRouter({
routes // （简写）相当于 routes: routes
})
/*导出路由模块*/
export default router
main.js中代码如下：
import Vue from 'vue'
import App from './App.vue'
import router from './router/router.js'
new Vue({
el: '#app',
router, //挂在路由
render: h => h(App)
})
根组件App.vue代码如下：
<template>
<div id="app">
<router-link to="/demo1">demo1</router-link>
<router-link to="/demo2">demo2</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
methods:{
}
}
</script>
router-link为路由跳转标签，属性to是路由跳转的url，每个url都对应不同的切换组件。
router-view标签为路由插入组件的位置
动态路由和get路由传值
demo1.vue作为动态路由的使用示例，demo2.vue作为get路由传值的示例，修改router.js代码如下：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import demo1 from '../components/demo1'
import demo2 from '../components/demo2'
/*配置路由*/
const routes=[
{path:"/demo1/:id",component:demo1,props:true},//props为true时，可以将动态路由的值传递给相应的组件
{path:"/demo2",component:demo2}
]
/*实例化路由*/
const router = new VueRouter({
routes // （简写）相当于 routes: routes
})
/*导出路由模块*/
export default router
修改App.vue代码如下：
<template>
<div id="app">
<router-link to="/demo1/9527">demo1</router-link>
<router-link to="/demo2?id=1357">demo2</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
methods:{
}
}
</script>
demo1.vue代码如下：
<template>
<div>
demo1的内容
<div>props传值为{{id}}</div>
</div>
</template>
<script>
export default {
props:['id'],//接收动态路由的值
data(){
return{
}
},
mounted(){
console.log(this.$route.params.id) //页面控制台输出结果是9527
}
}
</script>
demo2.vue代码如下：
<template>
<div>demo2的内容</div>
</template>
<script>
export default {
data(){
return {
}
},
mounted(){
console.log(this.$route.query.id) //页面控制台输出结果是1357
}
}
</script>
如何用js跳转路由？
在components文件夹中创建demo3.js,代码入下：
<template>
<div>编程式导航页面</div>
</template>
<script>
export default {
data(){
return {
}
},
mounted(){
console.log(this.$route.params.id)
//console.log(this.$route.query.aid)
}
}
</script>
router.js代码如下
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import demo1 from '../components/demo1'
import demo2 from '../components/demo2'
import demo3 from '../components/demo3'
/*配置路由*/
const routes=[
{path:"/demo1/:id",component:demo1,props:true},//props为true时，可以将动态路由的值传递给相应的组件
{path:"/demo2",component:demo2},
//{path:"/demo3",component:demo3,name:"test"},//name属性是给路由起别名，方便用js的方式去跳转
{path:"/demo3/:id",component:demo3,name:"test"},//name属性是给路由起别名，方便用js的方式去跳转
]
/*实例化路由*/
const router = new VueRouter({
routes // （简写）相当于 routes: routes
})
/*导出路由模块*/
export default router
App.vue代码如下：
<template>
<div id="app">
<button @click="goDemo3">去demo3</button>
<router-link to="/demo1/9527">demo1</router-link>
<router-link to="/demo2?id=1357">demo2</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
methods:{
goDemo3(){
this.$router.push({name:"test",params:{id:1234}}) //注意这里一定要使用别名，否则无法用动态路由传值
//this.$router.push({path:"/demo3",query:{aid:1234}}) //使用路径切换
//this.$router.push({name:"test",query:{aid:1234}}) //推荐使用路由别名切换导航，因为某些url路径比较长，不方便阅读
}
}
}
</script>
运行后点击页面按钮，路由自动跳转为demo3
如何嵌套路由？
在components文件夹下创建如下文件：
目录结构.png
App.vue代码如下：
<template>
<div id="app">
<button @click="goDemo3">去demo3</button>
<router-link to="/demo1/9527">demo1</router-link>
<router-link to="/demo2?id=1357">demo2</router-link>
<router-link to="/demo4">demo4</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
methods:{
goDemo3(){
this.$router.push({name:"test",params:{id:1234}}) //注意这里一定要使用别名，否则无法用动态路由传值
//this.$router.push({path:"/demo3",query:{aid:1234}}) //使用路径切换
//this.$router.push({name:"test",query:{aid:1234}}) //推荐使用路由别名切换导航，因为某些url路径比较长，不方便阅读
}
}
}
</script>
router.js代码如下：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import demo1 from '../components/demo1'
import demo2 from '../components/demo2'
import demo3 from '../components/demo3'
import demo4 from '../components/demo4'
import demo4a from '../components/demo4/demo4-1'
/*配置路由*/
const routes=[
{path:"/demo1/:id",component:demo1,props:true},//props为true时，可以将动态路由的值传递给相应的组件
{path:"/demo2",component:demo2},
//{path:"/demo3",component:demo3,name:"test"},//name属性是给路由起别名，方便用js的方式去跳转
{path:"/demo3/:id",component:demo3,name:"test"},//name属性是给路由起别名，方便用js的方式去跳转
{path:"/demo4",component:demo4,children:[
{path:"demo4-1",component:demo4a}
]},//name属性是给路由起别名，方便用js的方式去跳转
]
/*实例化路由*/
const router = new VueRouter({
routes // （简写）相当于 routes: routes
})
/*导出路由模块*/
export default router
demo4.vue代码如下：
<template>
<div>
<router-link to="/demo4/demo4-1">去子路由demo4-1</router-link>
<router-view></router-view>
</div>
</template>
demo4-1.vue代码如下
<template>
<div>demo4-1子路由</div>
</template>
运行代码，嵌套路由效果如下：
运行结果.png
路由hash模式 VS history模式
路由的默认模式是hash模式（如上个运行结果图的url多出了一个“#），这种模式无法在页面中使用锚点定位，所以项目中要尽量使用history模式，router.js修改如下配置：
/*实例化路由*/
const router = new VueRouter({
mode:"history", //模式修改
routes // （简写）相当于 routes: routes
})
以上便是vue-router在项目中最常用的方法和方式，如有错误，恳请指正。
止水
于沈阳
2019/03/31 22：42
