Vue点击按钮跳转到新路由

前言，点击 添加商品 按钮，跳转到新路由

1.第一步，绑定click事件

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

2.第二步，补充完整 goAddPage 事件

        // goAddPage 点击按钮在这个函数里面跳转路由到一个新的页面
        //通过路径 goods/add 跳转到新页面
        goAddPage() {
            this.$router.push('goods/add'); 
        }

通过 this.$router.push('goods/add');

3、第三步，创建该组件，并在route.js中注册它

注册

import GoodsAdd from '../components/good/Add.vue'

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/home',
    component: Home,
    redirect: '/welcome',
    children: [{
      path: '/welcome',
      component: Welcome
    },
    {
      path: '/users',
      component: Users
    },
      ,
    {
      path: '/rights',
      component: Rights
      },
      {
        path: '/roles',
        component: Roles
      },
      {
        path: '/categories',
        component: Cate
      },
      {
        path: '/params',
        component: Params
      },
      {
        path: '/goods',
        component: GoodsList
      },{
        path: '/goods/add',
        component: GoodsAdd
      }]
  }

即

{
   path: '/goods/add',
   component: GoodsAdd
}