Use Router to jump pages during vue development
1. Question:
During the project development process, I want to click from a page to jump to another page to display related content:
here I want to click to add a product, and then jump to a new page to fill in the information about the product
Two, the solution
1. First bind an event @click to the button that you want to click to jump
I bind a goAddpage function here
<el-button type="primary" @click="goAddpage">添加商品</el-button>
2. Create the goAddpage function under the method function
<script>
export default {
data(){
return{
}
},
methods:{
goAddpage(){
this.$router.push('./goods/add')
//创建好了后就可以点击跳转了
//这个文件时值跳转到哪个文件夹下面的哪个文件
//根据自己的需求去进行文件填写
}
}
}
3. Create the Add.vue file under the goods file
to initialize the content in the file
<template>
<div>
添加商品组件页面
</div>
</template>
<script>
export default {
data(){
return{
}
},
created(){
},
methods:{
}
}
</script>
<style lang="less" scoped>
</style>
4. Register this component in the route.
Find the index.js file in the router file and
register it as a component with the component name Add
Create a children[] in a large component wrapped outside to place the routing component
path as the redirected page link
component as the component name
import Add from '../components/goods/Add.vue'
{
path: '/home',
component: Home,
redirect: '/welcome',
children: [
{
path:'/goods/add',component:Add}
]
}
Here we need to clarify the ideas
3. Success story diagram
