Vue Router

安装引入

• 安装

npm install --save vue-router

• 引用
  在入口文件main.js 中引入(不一定是入口文件中引入，哪里需要用到就在哪里引入)

import router from 'vue-router'
Vue.use(router)

• 配置路由文件，并在vue实例中注入

var rt = new router({
  routes: [{
    path: '/', //指定要跳转的路径
    component: HelloWorld //指定要跳转的组件
  }]
})
new Vue({
  el: '#app',
  router: rt,
  components: {
    App
  },
  template: '<App/>'
})

• 确定视图加载的位置

<router-view></router-view>

路由的跳转

在 src 目录下新建一个 router 文件夹，然后新建一个 router.js 文件，把路由相关的信息都放在这个文件里。

<router-link to="/"></router-link>

在 router.js 里配置好路由

export default new router({
  routes: [
    {
    path: '/hello', //指定要跳转的路径
    component: HelloWorld //指定要跳转的组件
  },
  {
    path: '/test',
    component: test
  }
]
})

    <router-link to = "/hello">点我显示 HelloWord 组件的内容</router-link>
    <router-link to = "test"> 点我显示 test 组件的内容 </router-link> 

路由参数的传递

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

  routes: [
    {
    name: 'helloworld', // 在路由内加入路由的name
    path: '/hello/:hellomsg', //指定要跳转的路径，在path后加/: +传递的参数
    component: HelloWorld //指定要跳转的组件
  },
  {
    name: 'test',
    path: '/test/:msg',
    component: test
  }
]

3. 传递参数和接收参数看下边代码

用 name 和 params 传参

： {name: 'xx',params: { }}

< router-link :to = "{name: test ,params:{msg: 'xxxxxxx'}}" >
 test < /router-link>

读取参数： $route.params.xxxxxxx
这种形式的传参url是这种形式： xx/topic/xxx

4. 监听路由参数的变化

提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象。

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

参考：

• Vue-- 监听路由变化，数据无法更新？