Objective: Two ways to realize jump between vue components and parameter passing
1. Routing method
Page jump
- The current component uses $., and jumps through the parameter name corresponding to the name of the target component in the route.
Parameter pass
- Pass the value: The current component uses $., and the connection in the target component props in the route is corresponding to the parameter query
- Reference: Use $. to receive parameters in the target component script, and write parameter names directly on the page
(The method is not unique, there are other ways)
1. Routing
const router = new Router({
routes: [{
path: '/list',
name: 'List',
component: () => import('@/components/demo2/')
},{
path: '/detail',
name: 'Detail',
component: () => import('@/components/demo2/'),
props: route => ({param: })
}]
})2. List page
<template>
<div>
<h1>List Page</h1>
<div>
<el-button type="primary" @click="toDetail">Click to jump to details</el-button>
</div>
</div>
</template>
<script>
export default {
name: "List",
data() {
return {
myId: "123"
};
},
methods: {
toDetail() {
this.$({
name: 'Detail',
query: {param: }
})
}
}
}
</script>3. Details page
<template>
<div>
<h1>Details page</h1>
<div>
<el-button type="primary" @click="toList">Click to return to the list</el-button>
<div>Pass parameters：{{myId}}</div>
</div>
</div>
</template>
<script>
export default {
name: "Detail",
data() {
return {
myId : this.$
};
},
methods:{
toList(){
this.$({
name: 'List',
})
}
}
}
</script>2. Component method
Only one route can be configured to achieve different page redirection. Page redirection and parameter redirection are implemented through inter-component calls.
Page jump
- Parent Component → Child Component
- Refer to subcomponents, use the v-if tag to select and display the corresponding components separately
- Child Component → Parent Component
- The child component uses $.emit (event) to call the parent component method to change the custom parameters (show) to achieve jump
Parameter pass
- Parent Component → Child Component
- Pass the value: The parent component refers to the child component label (<my-detail :></my-detail>) to pass the parameter
- Access: Subcomponents receive parameters using props:['id']
- Child Component → Parent Component
- Pass the value: The child component uses $.emit (parent component method, parameter) to pass the parameters
- Access: The parent component receives it through method name (parameter)
1. Routing
const router = new Router({
routes: [{
path: '/main',
name: 'Main',
component: () => import('@/components/demo1/')
}]
})2. Home page component
<template>
<div>
<h1>Main page</h1>
<my-list v-if="show == 'list'" @toDetail="toDetail"></my-list>
<my-detail v-if="show == 'detail'" @toList="toList" :myId="myId"></my-detail>
</div>
</template>
<script>
import MyList from "@/components/demo1/MyList"
import MyDetail from "@/components/demo1/MyDetail"
export default {
name: "Main",
components: {
MyList,
MyDetail
},
data() {
return {
show: "list",
myId: ""
};
},
methods:{
toDetail(data){
= "detail"
= data
},
toList(){
= "list"
}
}
}
</script>3. List subcomponents
<template>
<div>
<h2>List Page</h2>
<div>
<el-button type="primary" @click="toDetail">Click to jump to details</el-button>
</div>
</div>
</template>
<script>
export default {
name: "MyList",
data() {
return {
myId: "123"
};
},
methods: {
toDetail(data) {
this.$emit("toDetail",)
}
}
}
</script>4. Details subcomponents
<template>
<div>
<h2>Details page</h2>
<div>
<el-button type="primary" @click="toList">Click to return to the list</el-button>
<div>Pass parameters：{{myId}}</div>
</div>
</div>
</template>
<script>
export default {
name: "MyDetail",
props:['myId'],
data() {
return {
};
},
methods:{
toList(){
this.$emit("toList")
}
}
}
</script>This is the article about vue page jump and parameter transfer. For more related vue page jump and parameter transfer content, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!