vue-router的使用

一、vue-router简介

1. Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
2. 包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

二、vue-router使用

1. 安装：npm install --save vue-router
2. 创建src/router/index.js文件来管理路由
3. 配置src/router/index.js文件：

import Vue from 'vue'                      //引入vue实例
import Router from 'vue-router'      //引入vue-router

Vue.use(Router)                            //使用Router  

export default new Router({           //创建并导出Router实例  
  routes: [                                  //配置路由数组 
    {
      path: '/',                               //设置根路由  
      name: 'Root',
      components: {
        main: PostList,
      }，
    },
    {
      path: '/article/:id/:name',       //设置动态路由接收参数
      name: 'Article',
      components: {
        main: Article,  
      },
    },
  ],
})   

4. 在main.js文件中将Router注入到vue实例：

import Router from './router'     //引入Router

new Vue({
  el: '#app',
  router: Router,      //vue实列中注入Router，注意属性名'router'不可更改
  template: '<App/>',
  components: {App},
})

5. 确定视图加载的位置
   <router-view></router-view>

三、vue­-router路由的跳转和参数传递

1. 必须在路由内加入路由的name
2. 必须在path后加/: +传递的参数

<router-link :to="{name: 'Article',params: {id: item.id,name: item.author.loginname}}">
  <span class="title">{{item.title}}</span>
</router-link>
//读取参数: this.$route.params.id

四、vue-router的监听

动态路由在来回切换时，由于它们都是指向同一组件，vue不会销毁再创建这个组件，而是复用这个组件。
当第一次点击（如：/userinfor/weizhuanhua）的时候，vue 把对应的组件渲染出来，但在/userinfor/weizhuanhua, /userinfor/yunqiangwu点击来回切换的时候，这个组件就不会发生变化了，组件的生命周期不管用了。这时如果想要在组件来回切换的时候做点事情，那么只能在组件内部（UserInfor.vue中）利用watch 来监听$route 的变化。

watch: {
  '$route'(to,from) {
    this.getUserInfor();
  }, 
},