vue监听url参数变化,vue获取跳转路径参数

路由获取

query方式 //传递参数 this.$router.push({ path: "/course", query: { id: '1'}, }); //接收参数this.id = this.$route.query.id; params方式 //传递参数this.$route.push({name:'/homeView',params:{id:'1'}})//接收参数this.id = this.$route.params.id;

使用js获取页面参数

采用正则表达式获取地址栏参数 // http://192.168.1.15:8080/#/id=123//在utils文件下新建一个query.js的js文件 写入以下代码export function getQueryString(name) { return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(window.location.href) || [, ""])[1].replace(/+/g, '%20')) || null}//在项目文件页面中引入import { getQueryString } from "@/utils/query";let id = getQueryString("id")console.log(id)//即可打印出url 参数id的值