vue-router的使用有两种方式：
image.png
声明式
使用<router-link :to="/"><router-link>点击跳转
使用<router-view></router-view>显示路由页面的信息
let route = new VueRouter({
routes:[{
path: '/',
name: 'home',
component: Home
}]
});
- 动态路由
传参和获取参数
let route = new VueRouter({
routes:[{
path: '/user/:id',
name: 'user',
component: User
}]
});
//传递参数
<router-link :to=`/user/123`></router-link>
//获取参数(路径中？前面的)
this.$route.params.id
//获取参数(路径中？后面的) /user?id=123
this.$route.query.id
let route = new VueRouter({
routes:[{
path: '/user/:id',
name: 'user',
component: User,
children:[{
path:'more',
component:More
}]
}]
});
// /user/:id/more
<router-link to='more' append></router-link>
直接使用router-link更方便简单，多数情况下是使用这种方式。而编程式能够控制细节，实现更多不同的功能，但是会比较麻烦一点。
编程式
this.$router.push('/') //回到根目录
setTimeout(function(){
this.$router.push('/') //一秒后回到根目录
},1000);
动态路由
// /user/:id
this.$router.push('/user/123')
//or
this.$router.push({name:'user', params:{id:'123'}})
- 这里的name是上面
let route = new VueRouter({
routes:[{
path: '/user/:id',
name: 'user',
component: User,
children:[{
path:'more',
component:More
}]
}]
});
中的name属性的值；这里就显示出route中name属性的作用来了
有时候面试的时候别人就会问，路由中name属性有什么作用呢？
这就是答案
- params是动态的参数，是一个对象。
多个router-view的使用
如果一个页面有多个router-view的时候应该怎么区分呢？
<router-link to='/page'>page<router-link>
<router-view name='sidebar'></router-view>
<router-view name='content'></router-view>
let route = new VueRouter({
routes:[{
path: '/page',
name: 'page',
components: {
sidebar,//组件一
content//组件二
}
}]
});
