实现效果如下：

获取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获取url地址中的参数

首先获取到url地址

let geturl = window.location.href 
// http://localhost:8081/#/pages/index/index?qycode=1001&qyname=%E4%BC%81%E4%B8%9A%E5%BF%99

方式一

let getqyinfo = geturl.split('?')[1]   //qycode=1001&qyname=%E4%BC%81%E4%B8%9A%E5%BF%99   截取到参数部分
let getqys = new URLSearchParams('?'+getqyinfo)  //将参数放在URLSearchParams函数中
let getqycode = getqys.get('qycode')   //1001   
let getqyname = getqys.get('qyname')  //%E4%BC%81%E4%B8%9A%E5%BF%99

方式二

let getqyinfo = geturl.split('?')[1]   //qycode=1001&qyname=%E4%BC%81%E4%B8%9A%E5%BF%99
let getqys = getqyinfo.split('&')  //['qycode=1001', 'qyname=%E4%BC%81%E4%B8%9A%E5%BF%99%E5%95%8A%E5%95%8A%E5%95%8A']
let getqycode =  getqys[0].split('=')[1]
let getqyname = getqys[1].split('=')[1] 
console.log('qycode:',getqycode,'getqyname:',getqyname)

方式三

let getqyinfo = geturl.split('?')[1]
let getqys = getqyinfo.split('&')
let obj = {}  //创建空对象，接收截取的参数
for(let i = 0;i < getqys.length;i++ ){
	console.log(i)
	let item = getqys[i].split('=')
	let key = item[0]
	let value = item[1]
	obj[key] = value 
}
console.log(obj) 

浏览器地址：http://localhost:8080/#/loginmis?ticket=1234

1. window.location.href
获取完整路径：http://localhost:8080/#/loginmis?ticket=1234
2. this.$ route.path
获取路由路径：“/loginmis”
3. this.$ route.params
路由路径参数: {}
4. this.$route.query
路由查询参数: { ticket: ‘1234’ }

console.log(this.$route)：

Vue中使用：

<template>
  <div>Loading...</div>
</template>

<script>
import { getLoginMis } from "../common/api";
export default {
  data() {
    return {
      params: {
        ticket: this.$route.query.ticket || "",
      },
    };
  },
  created() {
    console.log(this.$route.query.ticket);
  },
  mounted() {
    this.loginmis();
  },
  methods: {
    loginmis() {
      getLoginMis ({
        params: this.params,
        success: (data) => {
          if(data.returnCode== 0){
            this.$router.push({ path: "/" })
          }else{
            this.$message.error(data.returnMessage);
          }
        },
      });
    },
  },
};
</script>