1、? 參數(shù)

瀏覽器參數(shù)形式：http://javam4.com/m4detail?id=1322914793170014208

1.1、路由取參方式

this.$route.query.id

前端跳轉(zhuǎn)方式：

一、onclick方式 <a title="測(cè)試數(shù)據(jù)"@click="test(row.id)"target="_blank"><span>{{ row.title }}</span> </a>test(id) {this.$router.push({path: "/m4detail",query: {id: id}}); }二、a標(biāo)簽直接跳轉(zhuǎn) <a title="測(cè)試數(shù)據(jù)":href="javam4.com/m4detail/' + row.id"target="_blank"><span>{{ row.title }}</span> </a>

簡(jiǎn)單粗暴，只要你的瀏覽器地址欄參數(shù)帶 ？號(hào)，不管你是咋跳轉(zhuǎn)過(guò)來(lái)的， this.$route.query 后面直接 . 對(duì)應(yīng)的參數(shù)就可以取到值，比如 ?id=1323968&name=1111

對(duì)應(yīng)效果如下：

1.2、js取參方式

在 mothod 方法添加如下方法：

getUrlKey: function (name) {return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null }

調(diào)用直接通過(guò) getUrlKey(參數(shù)名稱)，具體如下：

2、/ 參數(shù)

瀏覽器參數(shù)形式：http://javam4.com/m4detail/1322914793170014208

2.1、路由方式

路由參數(shù)配置如下：

{ path: 'm4detail/:id', title: 'java面試網(wǎng)', name: 'm4detail', component: () => import('@/views/javam4/m4detail.vue') },

也就是由以前的 path: 'm4detail' > path: 'm4detail/:id'

這種方式需要 <router-link> 標(biāo)簽配合使用：

<router-link :to="路徑"></router-link>

而界面跳轉(zhuǎn)的時(shí)候因?yàn)橥ǔＪ且粋€(gè) <a> 標(biāo)簽，所以就可以不用了，直接套一層：

<router-link :to="`/m4detail/`+row.id" target="_blank"><a><span>{{row.title}}</span></a> </router-link>

參數(shù)說(shuō)明：

• to：跳轉(zhuǎn)路徑，對(duì)應(yīng)路由的 path
• target：跳轉(zhuǎn)方式，跟a標(biāo)簽用法一樣

界面取參：

this.$route.params.id

效果如下：

2.2、非路由方式

在 mothod 方法添加如下方法：

getUrlKey: function (directory) {return decodeURIComponent((new RegExp('/' + directory + '.*/([^/]+)/?$').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null }

其中 directory 表示那個(gè)目錄后面的參數(shù)，比如：javam4.com/m4detail/11111111111

那么在這取值就是 m4detail，其實(shí)使用這種方式，無(wú)非還是用正則表達(dá)式切割一下，如果覺(jué)得正則不滿足大家也可以自行修改。

let id = this.getUrlKey("m4detail"); console.log("this.id:"+id);

代碼截圖：

效果截圖：

希望這篇文章對(duì)你有所幫助。

博客園：https://www.cnblogs.com/niceyoo

總結(jié)

以上是生活随笔為你收集整理的vue获取浏览器地址栏参数(?及/)路由+非路由实现方式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。