vue页面跳转传参个人总结

  • Post author:
  • Post category:vue




一、使用router

1.第一个前端页面跳转到第二个前端页面,可以在第一个前端页面里加个方法:

    jumpPage2 (index) {
      this.$router.push({
        path: "/page2",
        query: {
          id: '1',
          name: '测试',
        }
      });
    },

2.然后,在

router/index.js

里加上:

  {
    path: '/page2',
    name: 'page2Name',
    component: () => import('../views/page2.vue'),
    meta: {
      title: 'page2名称'
    }
  },

3.然后,触发跳转方法时,就能跳转到page2.vue页面,这个页面可以这样接收参数:

  created(){
    console.log("第二个页面")
    console.log("id",this.$route.query.id)
    console.log("name",this.$route.query.name)
}    



二、使用url

1.先写好第二个页面的url(这个写在自己创建的一个getDataUrl.js里了)

//启动时用local就会用localhost,用test就会用测试网址,用prod就会用生产网址
//这个ENV可以启动或打包时设置,具体设置方法此处不再赘述
const hosts = ENV === 'local' ? location.origin : ENV === 'test' ? 'https://xxx.test.com' : 'https://xxx.prod.com'

// 第二个页面的前端地址
export const secondUrl = `${hosts}/static/outerTpx/project/#/page2` 

关于

${hosts}/static/outerTpx/project

,这个是在nginx里配置了路由,让这个url可以访问到前端项目:

        #前端页面地址
        location /static/ {
            alias /home/myuser/nginx/html/;
        }
        
(备注:前端项目在`/home/myuser/nginx/html/outerTpx/project`文件夹里,可以通过`https://xxx.test.com/static/outerTpx/project/index.html?t=123785613241`访问到其中的`/home/myuser/nginx/html/outerTpx/project/index.html`首页)

关于

/#/page2

,这个在

router/index.js

配置了,即可跳转到

page2.vue

页面。(参考第一步中的)

2.在第一个页面中,使用这个url,如下:

//从自己新建的js中引入export的参数
import { secondUrl } from '@/http/getDataUrl.js'



//这个得到的是
//https://xxx.test.com/static/outerTpx/project/#/page2?id=1&name=abc
let jumpUrl = secondUrl +"?id=1&name=abc"

//然后跳转即可
window.location.href=jumpUrl 

3.在第二个页面中,可以这样接收参数,同第一步一样:

  created(){
    console.log("第二个页面")
    console.log("id",this.$route.query.id)
    console.log("name",this.$route.query.name)
}    



三、个人总结

1.前端页面之间跳转可以用router或url等方法,传递的参数可以用

this.$route.query

接收(本人遇到的场景是扫二维码跳转前端页面,所以就用url那种方法跳转了,也可以传入参数)

2.如果传递中文参数,可以用

encodeURIComponent



decodeURIComponent

处理下



版权声明:本文为BHSZZY原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。