vue点击按钮跳转页面

1.给按钮添加点击事件

<button @click="register">登录</button>

2.实现跳转 在methods里面写入一下代码

register () {
      //跳转到上一次浏览的页面
      this.$router.go(-1)

      //指定跳转的地址
      this.$router.replace('/将要跳转的路由名称')

      //指定跳转的路由的名字下
      this.$router.replace({name:'指定路由名称'})

      //通过push进行跳转
      this.$router.push('/将要跳转的路由名称')
    }
    //例
     //表册查看
      handleCheck(row){
        this.$router.push({
          path:"/HouseSecurity/UnResident/DispatchCheck/index",
          query: {planId: row.planId}  //传参  （跳转后的页面：this.queryParams.planId = this.$route.query.planId）
        })
      },

3.在路由文件router.js中配置

import Vue from 'vue'
import Router from 'vue-router'
/* Layout */
import Layout from '@/layout'

Vue.use(Router)

// 公共路由
export const constantRoutes = [
 {
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path(.*)',
        component: (resolve) => require(['@/views/redirect'], resolve)
      }
    ]
  },
  {
    path: '/login',
    component: (resolve) => require(['@/views/login'], resolve),
    hidden: true
  },
  //表册查看路由配置
 {
    path: '/HouseSecurity/UnResident/DispatchCheck',
    component: Layout,
    hidden: true,
    children: [
      {
        path: 'index',
        component: (resolve) => require(['@/views/HouseSecurity/UnResident/DispatchCheck'], resolve),
        name: 'DispatchCheck',
        meta: {title: '任务派发查看', activeMenu: '/HouseSecurity/UnResident/DispatchCheck'}
      }
    ]
  },

 ]

export default new Router({
  mode: 'history', // 去掉url中的#
  scrollBehavior: () => ({y: 0}),
  routes: constantRoutes
})