当前位置：首页 > news >正文

使用vue获取url上的参数

news 2025/11/6 7:12:41

Vue获取URL参数示例

下面是一个完整的HTML页面，演示如何使用Vue获取URL参数，无需Vue Router：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue获取URL参数示例</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}body {background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);min-height: 100vh;display: flex;justify-content: center;align-items: center;padding: 20px;}.container {max-width: 800px;width: 100%;background: rgba(255, 255, 255, 0.95);border-radius: 15px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);overflow: hidden;}header {background: #4a6ee0;color: white;padding: 20px;text-align: center;}header h1 {font-size: 28px;margin-bottom: 10px;}.content {padding: 30px;}.param-section {background: #f8f9fa;border-radius: 10px;padding: 20px;margin-bottom: 25px;border-left: 5px solid #4a6ee0;}.param-section h2 {color: #333;margin-bottom: 15px;font-size: 22px;}.param-list {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 15px;}.param-item {background: white;padding: 15px;border-radius: 8px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);}.param-name {font-weight: bold;color: #4a6ee0;font-size: 16px;}.param-value {margin-top: 5px;font-size: 18px;word-break: break-all;}.empty-param {color: #888;font-style: italic;}.methods {display: grid;grid-template-columns: 1fr 1fr;gap: 20px;margin-top: 30px;}.method-card {background: white;border-radius: 10px;padding: 20px;box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);border-top: 4px solid #4a6ee0;}.method-card h3 {color: #333;margin-bottom: 15px;font-size: 20px;}.method-card p {color: #555;line-height: 1.6;margin-bottom: 15px;}.code-block {background: #f5f7fa;padding: 15px;border-radius: 5px;font-family: 'Courier New', monospace;font-size: 14px;overflow-x: auto;margin: 15px 0;}.test-link {display: inline-block;margin-top: 20px;padding: 10px 20px;background: #4a6ee0;color: white;text-decoration: none;border-radius: 5px;transition: background 0.3s;}.test-link:hover {background: #3a5ec0;}footer {text-align: center;padding: 20px;color: #666;font-size: 14px;border-top: 1px solid #eee;}@media (max-width: 768px) {.methods {grid-template-columns: 1fr;}.param-list {grid-template-columns: 1fr;}}</style>
</head>
<body><div id="app" class="container"><header><h1>Vue获取URL参数示例</h1><p>无需Vue Router，直接解析URL参数</p></header><div class="content"><div class="param-section"><h2>当前URL参数</h2><div class="param-list"><div class="param-item" v-for="(value, key) in urlParams" :key="key"><div class="param-name">{{ key }}</div><div class="param-value">{{ value || '<空值>' }}</div></div><div class="param-item" v-if="Object.keys(urlParams).length === 0"><div class="empty-param">当前URL没有参数</div></div></div></div><div class="methods"><div class="method-card"><h3>方法一：URLSearchParams</h3><p>使用现代浏览器的URLSearchParams API，简洁高效。</p><div class="code-block">
// 获取URL参数对象
getUrlParams() {const params = new URLSearchParams(window.location.search);const result = {};for (let [key, value] of params) {result[key] = value;}return result;
}</div></div><div class="method-card"><h3>方法二：传统解析</h3><p>使用传统的字符串分割方法，兼容性更好。</p><div class="code-block">
// 获取URL参数对象
getUrlParamsTraditional() {const search = window.location.search.substring(1);if (!search) return {};const params = {};search.split('&').forEach(param => {const [key, value] = param.split('=');params[decodeURIComponent(key)] = value ? decodeURIComponent(value) : '';});return params;
}</div></div></div><div style="text-align: center; margin-top: 20px;"><a :href="testUrl" class="test-link">测试带参数链接</a></div></div><footer><p>提示：尝试在URL后面添加参数，例如 ?name=张三&age=25&city=北京</p></footer></div><script>new Vue({el: '#app',data: {urlParams: {}},computed: {testUrl() {return window.location.pathname + '?name=张三&age=25&city=北京&occupation=工程师';}},methods: {// 方法1：使用URLSearchParams（现代浏览器）getUrlParams() {const params = new URLSearchParams(window.location.search);const result = {};for (let [key, value] of params) {result[key] = value;}return result;},// 方法2：传统解析方法（兼容性好）getUrlParamsTraditional() {const search = window.location.search.substring(1);if (!search) return {};const params = {};search.split('&').forEach(param => {const [key, value] = param.split('=');params[decodeURIComponent(key)] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';});return params;},// 更新URL参数updateParams() {// 使用现代方法，如果不支持则回退到传统方法if (window.URLSearchParams) {this.urlParams = this.getUrlParams();} else {this.urlParams = this.getUrlParamsTraditional();}}},mounted() {this.updateParams();// 监听URL变化（单页应用场景）window.addEventListener('popstate', this.updateParams);},beforeDestroy() {window.removeEventListener('popstate', this.updateParams);}});</script>
</body>
</html>