Vue page jumps and passes parameters personal summary

1. Use router

1. The first front-end page jumps to the second front-end page, you can add a method to the first front-end page:

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

2. Then, router/index.jsadd:

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

3. Then, when the jump method is triggered, you can jump to the page2.vue page, which can receive parameters like this:

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

Two, use url

1. Write the url of the second page first (this is written in a getDataUrl.js created by yourself)

//启动时用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` 

About ${hosts}/static/outerTpx/project, this is to configure the route in nginx, so that this url can access the front-end project:

        #前端页面地址
        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`首页）

About /#/page2, this is router/index.jsconfigured, you can jump to page2.vuethe page. (refer to the first step)

2. In the first page, use this url, as follows:

//从自己新建的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. In the second page, you can receive parameters like this, the same as the first step:

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

3. Personal summary

1. You can use router or url to jump between front-end pages, and the passed parameters can be this.$route.queryreceived (the scene I encountered was to scan the QR code to jump to the front-end page, so I used the method of url to jump, and also parameters can be passed in)

2. If you pass Chinese parameters, you can use encodeURIComponentand decodeURIComponentprocess them