• 技术文章 >web前端 >Vue.js

    vue怎么实现A页面跳转到B页面

    藏色散人藏色散人2021-09-11 11:29:59原创123

    vue实现A页面跳转到B页面的方法:1、设置A页面,代码如“”;2、将跳转的url添加到$router中;3、设置B页面,代码如“created() {...}”;4、修改js内容即可。

    本文操作环境:windows7系统、Vue2.9.6版,DELL G3电脑。

    vue怎么实现A页面跳转到B页面?

    vue 从A界面跳转到B界面并携带参数

    最近遇到一个需求,需要从A界面点击一个按钮跳转到B界面,并且携带参数。

    我是这样子实现了需求:

    A页面:

    <el-button size="mini"
                       type="success"
                       @click="add"
                       icon="el-icon-plus"
                       round
                       plain>{{$t('common.add')}}</el-button>
            <el-button type="primary"
                       size="mini"
                       @click="edit"
                       icon="el-icon-edit"
                       plain
                       round>{{ $t('common.edit') }}</el-button>

    点击事件:

    add() {
          this.lockTaskStatus = 'new'
          this.toLockTaskManagePage()},edit() {
          this.lockTaskStatus = 'edit'
          this.toLockTaskManagePage()},toLockTaskManagePage() {
          this.$router.push({
            path: '/taskLockManage',
            name: 'TaskLockManage',
            params: {
              status: this.lockTaskStatus        }
          })}

    将将跳转的url添加到 $router中。

    path 中的url 最前面加 / 代表是根目录下,不加则表示是子路由。

    通过path + params的组合传递参数。

    B页面:

    created() {
        this.getParams()
      },
      watch: {
        // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
        $route: 'getParams'
      },
      methods: {
        getParams() {
          // 取到路由带过来的参数
          const res = this.$route.params.status
          console.log('getParams', res)
        }}

    最后,还需在router/index.js中注册:

    {
        path: '/taskLockManage',
        component: Layout,
        redirect: '/taskManage/index',
        hidden: true,
        children: [
          {
            path: 'taskLockManage',
            component: () => import('@/views/taskManage/taskLockManage'),
            name: 'TaskLockManage',
            meta: { title: 'taskLockManage', icon: 'user', noCache: true }
          }
        ]}

    这样,便可实现了跳转。(PS:这是目前发现的比较好的方法,希望哪位大佬有更好的方法指导。)

    相关推荐:《vue.js教程

    以上就是vue怎么实现A页面跳转到B页面的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:vue
    上一篇:怎么离线安装vue脚手架 下一篇:vuejs算什么
    线上培训班

    相关文章推荐

    • vuejs怎么实现全局状态管理• vuejs传递数据的方法有哪些• vue如何实现页面跳转• 怎么离线安装vue脚手架

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网