路由组件传参
比方说不同的用户拥有不同的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' }
]
})