vue-router相关

路由组件传参

比方说不同的用户拥有不同的id，需要进入同一个页面，就可以在vueRouter实例中这样写

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

用:id就可以传递id，然后在vue组件中取id的方法是

$route.params.id

当从user/zs到user/ls的时候，因为只是服用了组件，所以不会调用组件的生命周期函数，因此如果要监听路由参数的变化，需要用watch函数监听或者用导航守卫。

在代码中要跳转url的话用

this.$router.push('home')

name搭配params，paht搭配query。详情见https://router.vuejs.org/zh/guide/essentials/navigation.html

命名路由

有时候需要给一个路由命名，这样会方便，方法如下

const router = new VueRouter({
  routes:[
    {
      path:'/user/:userId',
      name:'user'.
      component:User  
    }
]
})

暂时感觉这个没啥用，回头再看

命名视图

同时展示几个router-view。如果router-view没有设置名字，则会默认为default。
代码如下：

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>


const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

这样就可以在不同的router-view中渲染出不同的组件。

vue-router中的别名

访问别名的时候url不会变

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})