前言：学习路由之前会觉得路由比较神秘，简单学习之后觉得路由还是比较简单的，或者说基本的路由使用还是比较简单的。普通的网站路由，是通过访问不同的地址，获取到不同的页面来实现网站各个页面之间的访问。vue的路由一般用于单页面，可以简单的理解成通过访问不同的路由地址，获取到不同的组件，实例化在页面指定的地方，以此来实现网站的路由。
1、在Vue项目中的使用
下面贴出了在vue中使用router的代码，分别是在不同的文件中。我们通过<router-link>标签跳转到对应的路由，通过<router-view>渲染路由映射的组件。我们创建的vue项目，默认根实例是App.vue,入口文件是main.js。从下面的代码可以看出来，我们把router中导出的路由放在了App.vue中，这也就代表着，我们可以在该项目的任何实例中访问设定的路由，通过访问不同级别的路由，显示出不同渲染的组件。
path就是路由中的路径，'/'代表根部的意思，path=‘’则代表当前的意思。各种有啥奥妙，自己悟一下吧，没啥大用。path中还有一个通配符'*'，这个
import router from './router' //main.js
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
})
<template> //App.vue
<div id="app">
<router-link to="/BtContent">Go to demo(基础)</router-link>
<router-link to="/AssContent">Go to demo(组件)</router-link>
<router-view></router-view>
</div>
</template>
import Vue from 'vue' //router/index.js
import Router from 'vue-router'
import BtContent from '@/study/baseData/BtContent'
import AssContent from '@/study/component/AssContent'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/BtContent',
name: 'BtContent',
component: BtContent
},
{
path: '/AssContent',
name: 'AssContent',
component: AssContent
}
]
})
2、$route和$router
this.$route是当前路由的一个对象,这个对象中包含了路径参数，查询参数等属性，this.$router应该就是引入的router的类库实例化出来的对象，该对象拥有go、push、replace等方法。
路径参数是params，假设我们想设置一个参数名为id的路径参数，我们可以在设置路由的时候在path的末尾加上 ‘/:id’ ，然后路由跳转的时候，加上对应的值就可以了。举例：
path: '/BtContent/:id', //路由设置 <router-link to="/BtContent/123"></router-link> //路由跳转
查询参数是query，假设我们想设置一个参数名为searchText的查询参数，我们可以在路由跳转中加上query属性，并在其中设置查询参数。举例：
<router-link :to="{path:'/BtContent/1',query:{searchText:'模糊'}}">查询跳转</router-link>
上面说的两个参数都会在地址栏里有相应的显示，如果不太理解，可以把this.$route.params和this.$route.query打印出来看一下。有一种情况，路径参数在地址栏中没有对应的显示，那就是使用this.$router中的push方法，设置的路径参数。
跳转路由不仅仅是使用<router-link>跳转，还可以使用this.$router的方法来进行跳转。其中根据路径实现跳转的方法有push和replace两种，代码，代码。这两种方法实现的功能都差不多，区别在于push和<touter-link>一样，会增加一个历史节点，其实就是浏览器的历史记录，而replace是更新当前的历史节点，这个历史节点可以让我们通过浏览器的前进后退按钮进行访问。
还有一个方法，就是go方法，这个方法就比较简单了，给go方法，传入相应的数值，它就会跳转到当前页面的前几个历史节点或者后几个历史节点。
<button @click="$router.push({path:'/Demo4',params:{str1}})">go to Demo4</button> //这样设置的params参数不会显示在地址栏中，str1是data中的一个属性，这样传递之后，params中的属性名和属性值均和str1一样
<button @click="$router.replace('/Demo5')">go to Demo5</button>
<button @click="$router.go(-1)">back</button>
3、命名路由和命名视图
跳转路由的时候除了可以使用路由的path跳转之外，还可以给路由设置一个name的属性，然后通过name跳转，如果name的属性值重复，则取第一个设置该值的路由，调用的方式和调用path类似。
除了路由可以命名，视图也可以命名，这样的话我们就需要在设置路由的时候，分别设置在对应的路由映射哪个组件。视图的命名也是更改name属性，没有设置name的取默认名称default。不过，我觉得这玩意用处不大，特定的情境下有用吧。上代码
{
path: '/HelloWorld',
name: 'HelloWorld',
components: {default:HelloWorld,menu:MenuConponent}
},
4、嵌套路由
这个概念比较简单，意思就是路由引用的组件中可以再加一个路由视图，这个路由视图不会渲染比他级别高的路由，只会渲染该组件所属路由的子路由。看下代码：
{
path: '/RouterContent',
name: 'RouterContent',
component: RouterContent,
children:[
{path:'',component:First},
{path:'RouterChild',component:RouterChild},
]
}
5、重定向和别名
这个重定向的意思就是，当你挑战的目标是路由1时，实际会跳转到你引导的路由2，地址栏和路由视图渲染的都是路由2。别名的意思就是这个路由有两个名字，映射的是同一个组件。上代码：
{path:"/Demo1",redirect:'/Demo2'}, //重定向
{path:"/Demo3",component:DemoConponent3,alias:"/Demo4"} //别名