vue中的uri vue獲取url後面的引數

2021-10-12 14:48:03 字數 923 閱讀 6413

### 使用路由獲取頁面引數

1,在路由中設定path:

path: '/detail/:id/',

name: 'detail',

component: detail,

meta: {

title: '詳情'

獲取引數

let id = this.$route.params.id

備註:1、引數名需要保持一致

2、如果路由中沒有傳參(會報錯,頁面無法顯示,正常頁面為

如果有的引數可傳可不傳,可以使用?傳參

例如:獲取的時候:

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為時,可以得到id為123

vue中el date picker值的獲取

el date picker中時間的獲取是很常見的,但對於我這種不是專業前端的人還是記錄一下如果獲取el date picker選擇的兩個時間 首先,我們明白el data picker可以通過v model繫結值,且繫結的值為陣列型別,我們可以根據下標去獲取 繫結的陣列變數 下標 但是獲取出來的格...

九 vue中事件物件的獲取

事件物件的獲取 事件物件的獲取分為兩種情況,分別是事件方法加括號和不加括號 不加括號 root click handleclick 新增button div src script newvue methods script body 加括號 加括號是為了可以傳參 root click handlec...

vue獲取map集合中的key value值

背景 前端接收後端返回的list集合,並將該集合展示在頁面。例如 let list 方案一,直接在html 中使用v for object.key object.value來渲染頁面 v for map in list v for key,index in object.key map key in...