路由跳转和传参方式有
1.使用router - link 跳转
2.编程式 this.$router
要先将路由配置好
{
path: '/home/:id',
name: 'home',
component: () => import('../views/HomeView.vue'),
},
第一种 router-link
1. 不带参数
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}">
2.带参数
<router-link :to="{name:'home', query: {id:1}}">
// html 取参 $route.query.id
// script 取参 this.$route.query.id
<router-link :to="{name:'home', params: {id:1}}">
<router-link :to="{path:'/home', params: {id:1}}">
// html 取参数 $route.params.id
// script 取参数 this.$route.params.id
第二种编程式 this.$router
1. 不带参数
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
2.带参数
this.$router.push({ path: '/home/' + id })
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// html 取参 $route.query.id
// script 取参 this.$route.query.id
this.$router.push({name:'home',params: {id:'1'}})
// html 取参 $route.params.id
// script 取参 this.$route.params.id