vue-router用法

开始之前

SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。
大型单页应用最显著特点之一就是采用前端路由系统，核心在于更新视图而不重新请求页面

this.$router : 指在根组件引入的整个 router ;
this.$route : 当前组件对应的 route

准备工作

//1.引入：
import router from 'vue-router'
Vue.use(router)
//2.创建一个路由

var rt = new router({
routes:[
 // ...
]
})

//3.在根组件中加入 router 属性
new Vue({
  el: '#app',
  router:rt,
  components: { App },
  template: '<App/>'
})

最基本用法

//设置路由
var rt = new router({
routes:[
  {
    path: "/a",
    components: A // 组件 A
  }
]
})

// router-link
// 在根组件的任何子组件中：
<router-link to="/a"> ... </router-link>

//点击 `router-link` 标签内的内容就会选择第一个路径匹配的路由（这里是 '/a'）, 在根组件的 <router-view> 中显示组件 A 的内容

动态路由匹配（Dynamic Route Matching）

动态路由匹配允许我们导向同一个路由的时候传输不同数据（path)，使用 : 号：

//in <router-link>:
<router-link to="/a/BB/c/DD"></router-link>

//in routes:
{
  path: "/a/:b/c/:d",
  component: ...
}

//上面两个路径是匹配的，结果是 路径变为 /a/BB/c/DD, 并且组件通过 this.$route.params 中得到了两个参数：
// this.$route.params.b = "BB"
// this.$route.params.d = "DD"

也就是说，有":"号的部分可以动态匹配，接收参数

命名路由

每个路由可以直接设置一个 name 属性，这样我们在 <router-link> to 属性中使用同样的 name 就可以进行路由了：

//设置路由
routes:[
  {
    name: a,
    path: "/a",
    components:{
      keya: A,   // 组件 A
      keyb: B    // 组件 B
      }
  }
]
})

// router-link
// 在根组件的任何子组件中
<router-link :to="{
  name: 'a',
  params: {
    a1: 1,  //参数 a1
    a2: 2   //参数 a2, 这两个参数也可以在当前路由对应的组件 this.$route.params 中找到
  }
  }"> ... </router-link>

命名路由 VS 非命名路由

1.匹配：命名路由是通过 name 属性匹配；非命名路由是通过 path 匹配；
2.参数传递：命名路由通过 params 把参数传给路由； 非命名路由无法用 params 传参，子组件的 this.$route.params 中属性是通过 path 的匹配获得。
3.路径格式：命名路由的路径格式是在路由中写好的，获取到参数后，路径中的 ":"+ 变量名 会被变量的值替换；而非命名路由在 <router-link> 中就确定了。

router-view

<router-view>就是当前路由对应的子组件所要渲染的位置

子路由

上面的 <router-view> 是出现在根组件中，也就是引入了 router 的 Vue 实例，如果我们需要子组件的内部也会根据参数、路径的差异而显示不同内容，vue 提供了一个 子路由(在路由中，使用 childrens 属性)

routes: [
    { path: '/user/:id', component: XXX,
      children: [
        {
          //  路径为 /user/:id/a 时，这部分在组件 XXX 中的 <router-view> 显示
          path: 'a',
          component: A // 组件A
        },
        {
          //  路径为 /user/:id/b 时，这部分在组件 XXX 中的 <router-view> 显示
          path: 'b',
          component: B //组件 B
        }
      ]
    }
  ]

两个 name 属性

<router-link> 和 <router-view>中都用到 name 属性：
<router-link> 的 name 属性对应的是路由的 name;
<router-view> 的 name 属性对应的是当前路由中 "key" 与 name 相匹配的组件；

其它

1.* 是全匹配，这个对应的路由一般放到最后（路由匹配的优先级排序是从前往后），用于处理 404；
2.重复利用，当我们连续使用同一个路由（只是修改了参数）的时候，直接是重复利用原来的路由、组件，不会触发新的生命周期，这个时候可以考虑使用：
1）watch 观察路由数据：

watch: {
  '$route' (to, from) {
    // 对路由变化作出响应...
  }
}

2)用 beforeRouteUpdate 钩子