VUE使用编程式路由跳转页面

vue开发过程中使用Router跳转页面

一、问题：

在项目开发过程中，我想从某个页面点击后跳转到另外的一个页面，展示相关的内容：
这里我想点击添加商品，然后跳转到一个新的页面去填写关于商品的信息

二、解决办法

1、首先给想要点击跳转的按钮绑定一个事件@click

我在这里绑定了一个goAddpage 函数

 <el-button type="primary" @click="goAddpage">添加商品</el-button>

2、在method函数下创建goAddpage 函数

<script>
export default {
    
    
    data(){
    
    
        return{
    
    }
    },
    methods:{
    
    
	 goAddpage(){
    
    
        this.$router.push('./goods/add')
        //创建好了后就可以点击跳转了
        //这个文件时值跳转到哪个文件夹下面的哪个文件
        //根据自己的需求去进行文件填写
    }
     }    
}

3、在goods文件下创建Add.vue文件
将文件里的内容进行初始化的编写

<template>
    <div>
        添加商品组件页面
    </div>
</template>

<script>
export default {
     
     
    data(){
     
     
        return{
     
     }
    },
     created(){
     
     },
      methods:{
     
     }    
}
</script>

<style lang="less" scoped>

</style>

4、在路由中注册这个组件
找到router文件中的index.js文件
注册为组件名称Add的组件

在外面包裹的一个大的组件中创建一个children[]去放置路由组件
path为跳转的页面链接
component为组件名称

import Add from '../components/goods/Add.vue'

 {
    
    
      path: '/home',
      component: Home,
      redirect: '/welcome',
      children: [
        {
    
     path:'/goods/add',component:Add}
      ]
    }

这里需要将思路理清晰

三、成功的事例图