Vue点击按钮跳转到新路由

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

1.第一步,绑定click事件

   添加商品

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
}

 

你可能感兴趣的:(#vue,vue.js,javascript,前端)