vue的路由配置，在vue官网介绍的也是十分详细，个人推荐，可以根据vue官网进行学习，在这里，咱们用比较接地气的方式，分享一下vue的路由配置。
路由是vue单页面应用的一个关键手段，简单来说，就是开发者自己设置整个网站的来龙去脉，比如说用户点击一个按钮或者链接，下一步页面将会怎么跳转，这些都是开发者设置好了的，也就是路由设置。
在vue中点击路由跳转，使用组价router-link，该组件有一个to属性,来指定路由去向,router-link渲染后就是一个a标签,路由的出口,也就是内容显示的位置,使用router-view组件展示。
如实例在vue挂载的元素中写入：
<router-link to="配置的路由">要跳转的链接</router-link>
<router-view></router-view>
这两行代码通过页面渲染之后，实际上router-link渲染成了a标签，to属性可以类比理解为href，点击的时候，router-view组件中就会显示你的路由配置中指定的组件内容。
那么怎么去配置路由呢？
此文，咱们以外部引入的router.js为例，说一下怎么配置路由。首先需要引入router.js，注意引用格式要在vue.js之后引用，然后需要实例化一个vue路由对象，
var router = new VueRouter({})
需要注意的是，内部传一个对象参数，接下来就在该参数中进行配置，写入一个属性routes，把它设置为一个数组，注意此时的拼写是routes：
var router = new VueRouter({
routes:[]
})
好的，然后可以在routes中配置路由，路由的方式为该数组的元素，每一个路由配置实体就是一个元素，每一个元素都是一个对象形式的，然后在这个对象中设置具体的路由属性。
比如说，要设置一个路由home，使用户点击home以后可以直接显示home所指定的组件内容，该怎么设置呢？如：
var router = new VueRouter({
routes:[
{
path:'/home',
name:'home',
component:{
template:'<p>home的内容</p>'
}
}
]
})
如上就是设置了一个vue的路由实体，path指的是路由的路径，也就是将来你写到to上面的内容，这个需要开发者根据项目的内容或者模块内容加以设置，name是该路由的名字，可以不用设置该属性，component指的是点击path之后显示在router-view中的组件，他的值可以是开发者自定义的一个组件，也可以如上代码中一个template代码片段，都是可以的。
如果你使用的是比较多的router-view，想要根据需求不同的组件内容显示到不同的router-view中，你可以设置多个组件，只不过需要给component加s，这个不难理解，复数嘛，也就是设置components。还需要给不同的router-view添加不同的name，指定不同的name值，便于区分。比如：
<router-view></router-view>
<router-view name="cont"></router-view>
<router-view name="foot"></router-view>
那么怎么在路由里面指定不同的router-view呢？请看以下实例：
var router = new VueRouter({
routes:[
{
path:'/home',
name:'home',
component:{
template:'<p>home的内容</p>'
}
},{
path:'/cont',
components:{
cont:{
template:''
},
foot:{
template:''
},
default:{
template:''
}
}
}
]
})
如上实例，如果用户在router-view中定义了name为cont，则需要在components中添加一个cont属性，他所对应的值，则为要在name为cont的router-view中显示的组件，同理设置foot，在default中添加的组件，则显示在没有指定name的router-view中。
接下来需要把设置好的路由实例，注册到vue的实例中，也就是添加一个router属性罢了，代码如下:
var app = new Vue({
el:'#app',
data:{},
methods:{},
router:router
});
好了，此刻你就可以配置vue路由了！