Vue（十四）：Router

　　前言：学习路由之前会觉得路由比较神秘，简单学习之后觉得路由还是比较简单的，或者说基本的路由使用还是比较简单的。普通的网站路由，是通过访问不同的地址，获取到不同的页面来实现网站各个页面之间的访问。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"}  //别名