vue不通過路由直接獲取url中參數的方法示例


vue不通過路由直接獲取url中參數的方法示例

vuejs取得URL中參數的值
地址:http://localhost:3333/#/index?id=128
console.log(this.$route.query.id)
結果:128
============
使用路由獲取頁面參數
在路由中設置path:
{
path: '/detail/:id/',
name: 'detail',
component: detail,
meta: {
title: '詳情'
}
}
獲取參數
let id = this.$route.params.id
備注:
1、參數名需要保持一致
2、如果路由中沒有傳參(http://192.168.1.12:8080/#/detail),會報錯,頁面無法顯示,正常頁面為 http://192.168.1.12:8080/#/detail/234

如果有的參數可傳可不傳,可以使用?傳參
例如:http://192.168.1.12:8080/#/detail/?id=123
獲取的時候:
let id = this.$route.query.id
這樣即使取不到參數,頁面也不會報錯

使用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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM