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处理下