举例说明
点击父组件的button按钮跳转到子组件中，并携带参数，便于子组件获取数据
父组件：My.vue
<template>
<div id="my">我的组件
<button @click="goHome">跳转到首页</button> //方法goHome
</div>
</template>
父组件：My.vue
export default {
name: "my",
data(){
return {
id:1000
}
},
mounted() {
console.log(this.$route.params);//My的路由地址
},
methods: {
goHome(){
console.log(this.$router); //My的路由地址
},
},
};
1.字符串路径
methods: {
goHome(){
//字符串路径
this.$router.push("/");
//或者
this.$router.push({
path:'/'});
}
}
需要对应路由配置如下：
{
path: '/',
name: 'Home',
component: Home
},
Home.vue 子组件
<template>
<div class="home">
首页组件
</div>
</template>
<script>
export default {
name: 'Home',
mounted() {
//获取路由路径get传值
console.log(this.$route);
},
}
</script>
输出结果：
浏览器界面：
点击My跳转到Home组件
2.以路由名称 跳转带参 params
methods: {
goHome(){
//以路由名称 跳转带参 params
this.$router.push({
name:'About',params:{
id:10}});}
}
需要对应路由配置如下：
{
path: '/about/:id',
name: 'About',
component:About
},
About.vue 子组件
<template>
<div class="about">
关于组件
</div>
</template>
<script>
export default {
name:'about',
mounted() {
//挂载完成获取路由的动态传值
//this.$router 类似history对象的一个api
//this.$route 这个api是当前路由的相关匹配参数
console.log(this.$route);
console.log(this.$route.params.id);
},
}
</script>
输出结果：
浏览器界面：
点击My跳转到About组件
3. 编程式跳转 get传值 query
methods: {
goHome(){
this.$router.push({
path:'/',query:{
id:1,name:'abc'}});
// 或者 this.$router.push({
name:"Home",query:{
id:1,name:'abc'}});
}
需要对应路由配置如下：
{
path: '/',
name: 'Home',
component: Home
},
子组件为Home.vue
<template>
<div class="home">
首页组件
</div>
</template>
<script>
export default {
name: 'Home',
mounted() {
//获取路由路径get传值
console.log(this.$route.query);
console.log(this.$route);
},
}
</script>
输出结果：
浏览器界面：
点击My跳转到Home组件
