【VUE】路由传参

params传值

// 配置路由 
{ 
   path: '/list', 
   name: 'list', 
   component: List
} 

// 传值
this.$router.push({
     name: 'list', // 调整地址
     params: { id: urID, type: str} 
});

// 跳转的组件获取值
mounted() {
   console.log(this.$route.params.id); // 获取传过来的id
   console.log(this.$route.params.type); // 获取传过来的type
}

动态路由传值

// 配置路由 
{ 
   path: '/list/:id', 
   name: 'list', 
   component: List 
} 
   
// 传值 
this.$router.push({ 
   name: `/list/${id}`, 
}); 
 
// 跳转的组件获取值 
mounted() { 
   console.log(this.$route.params.id); // 获取传过来的id 
}

query传值

// 配置路由 
{ 
   path: '/list', 
   name: 'list', 
   component: List
} 

// 传值query传递的参数会显示在url后面?id=？
this.$router.push({ 
   name: 'list', 
   query: { id: urID}
});

// 跳转的组件获取值 
mounted() { 
   console.log(this.$route.query.id); // 获取传过来的id 
}

router-link标签参数传递

// 配置路由 
{ 
   path: '/list', 
   name: 'list', 
   component: List
}
 
// 传值
<router-link :to="{name:'list',params:{id:'03'}}">List</router-link>
 
// 跳转的组件获取值
mounted() { 
   console.log(this.$route.params.id); // 获取传过来的id 
}