vue开发 - 获取url后面的参数(路由传参与非路由传参)

一、使用路由获取页面参数
1.方法一

// router文件
{
            path: '/merchant/:brandId',
            name: 'merchant',
            meta: {
                title: "详情",
            },
            component: () => import('@/pages/merchants/merchant')
        },


//brand.brandId为后台获取的id
<router-link :to="`/merchant/${brand.brandId}`">
  <div class="rightDiscount">
  </div>
</router-link>

// 取值this.$route.params.brandId

2.方法二

<div class="Rt_right" @click="toSHdetail"></div>

methods:{
	toSHdetail() {
      this.$router.push({
        path: "/sellDetail",
        query: {
          clicked: this.clicked
        }
      });
    },
}

// 取值this.$route.query.clicked

温馨提示：

备注: 
1、参数名需要保持一致 
2、如果路由中没有传参（http://192.168.1.10:8080/#/detail），会报错，页面无法显示，正常页面为 http://192.168.1.10:8080/#/detail/234

如果有的参数可传可不传，可以使用？传参 
例如：http://192.168.1.10:8080/#/detail/?id=123 
获取的时候：
let id = this.$route.query.id
这样即使取不到参数，页面也不会报错

二、使用js获取页面参数
方法一：
应用场景：可用于与app交互时，获取app方传递过来的token等数据
如果是在普通js文件中，想获取url后面的参数，可以新建一个工具类，utils.js：

/* eslint-disable */
export default{
    getUrlKey: function (name) {
        return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
    }
}

在其他需要获取参数的js中引入
import Vue from 'vue'
import utils from '../libs/utils'
// Vue.prototype.$utils = utils // main.js中全局引入
let id = utils.getUrlKey('id')
console.log(id)
url为http://192.168.1.10:8080/#/detail/?id=123时，可以得到id为123

方法二：
应用场景：可用于与app交互时，获取app方传递过来的token等数据

跟app方确认传递的方法名称(自己随意)，getToken();
data() {
    return {
      // 控制遮罩层的显示隐藏
      show: false,
      // 获取app传过来的用户token
      TOKEN: ""
    };
  },
  mounted() {
    // 页面数据已完全渲染完成 获取用户token
    // this.TOKEN = getToken();
    // console.log(TOKEN);
  },

稍等一下，路由中可配置…

此处为路由懒加载模式component: () => import("@/pages/index/sellDetail")

{
    path: "/sellDetail",
    name: "sellDetail",
    meta: { title: "销售明细" },
    component: () => import("@/pages/index/sellDetail")
  }

router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title;
  }
  next();
});
// 设置后，页面title就为meta: { title: "销售明细" }所设置的title了。