需求:从外部连接上从用户的路径上获取URL'?'之后 的参数,根据参数获取传入后台;

目录,在和src同级的目录中新建一个util.js

在util.js中写入: 

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

 在main.js中注册:

import utils from './utils';   //获取url参数

Vue.prototype.$utils = utils;   //注册全局方法

在XXX.vue页面使用

let aCode = [];
let acode = this.$utils.getUrlKey("acode");
// 获取政务微信传过来的acode值并返回给后台
$.ajax({
    url:'http://192.168.20.90:8888/res072501/jdbg/jsxxCon/getUser?acode=' + acode,
    type:'GET',
    dataType:'json',
    success:function(data){
        aCode = data
    }
})

注:

若地址栏URL为：abc.html?id=123&url=http://www.maidq.com
 
那么，但你用上面的方法去调用：alert(GetQueryString("url"));
 
则会弹出一个对话框：内容就是 http://www.maidq.com
 
如果用：alert(GetQueryString("id"));那么弹出的内容就是 123 啦；
 

实现效果如下：

获取URL中的参数，并显示在页面上

流程：

1.在index.js中编辑代码如下：

import {createRouter,createWebHashHistory} from 'vue-router'
import News from '../components/News.vue'
import Home from "../components/Home.vue"


// 1. Define route components.
// These can be imported from other files


// 2. Define some routes
// Each route should map to a component.
// We'll talk about nested routes later.
const routes = [
    {
        path: '/',
        component: Home
    },
    {
        path:"/news/:id*",
        component:News
    },
 
]

// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = createRouter({
    // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
    history: createWebHashHistory(),
    routes, // short for `routes: routes`
})

export default router

2.新建News.vue

News.vue:

<template>
    <div>
        <h1>新闻页</h1>
        <p>参数：{{news_id}}</p>
    </div>
</template>

<script>
    export default {
        name: "News",

        data(){
            return {
                // 获取参数id
                news_id : this.$route.params.id
            }

        },
    }


</script>

<style scoped>

</style>

一、场景描述

• 前端vue框架项目，后端springboot框架；
• lz的需求场景是集成单点登录，通过登录页面路径后追加参数，向后端springboot项目发送请求，后端接收请求后同时获取到追加的参数。

二、解决方式

• 网上有说通过路由的方式，lz尝试后失败
• lz采用不通过路由直接获取url中参数的方法尝试成功

三、解决步骤

1、在vue项目根目录下创建一个urlParse.js文件

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

2、在vue项目根目录下main.js中注册全局方法

import urlParse  from './urlParse'    //获取url参数
 
Vue.prototype.$urlParse=urlParse   //注册全局方法

3、vue的登录页面中该方法

//AuthToken 表示vue项目登录页面路径后追加的参数
let AuthToken=this.$urlParse.getUrlKey("AuthToken")