vue获取url中的参数值,this.$route.query

如果有的参数可传可不传，可以使用？传参

例如：http://192.168.1.12:8080/#/detail/?id=123

获取的时候：

let id = this.$route.query.id

一、在vue组件单页面中获取页面参数

    watch: {
      "$route.query": {
        handler() {
          if (this.$route.query) {
            // this.departmentDid 是在data中定义的
            this.departmentDid = this.$route.query.did
          }
          return
        },
        immediate: true
      }
    },

immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。

二、使用js获取页面参数
如果是在普通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 '../../assets/scripts/utils'
// Vue.prototype.$utils = utils // main.js中全局引入
let id = utils.getUrlKey('id')
console.log()

url为http://192.168.1.12:8080/#/detail/?id=123时，可以得到id为123

参考文章地址:https://blog.csdn.net/u010394015/article/details/80651730