vue跳轉(zhuǎn)頁簽傳參并查詢參數(shù)的保姆級(jí)教程
場景
需求是要求通過點(diǎn)擊用戶ID或者昵稱 跳轉(zhuǎn)用戶管理頁面并查詢該用戶
實(shí)現(xiàn)效果如圖
實(shí)現(xiàn)方法開始
在A頁面也就是筆記列表頁簽為父級(jí) 代碼如下
<el-table v-loading="loading" :data="manageUserNoteList" @selection-change="handleSelectionChange"> <el-table-column label="用戶ID" align="center" prop="userId"> <template slot-scope="scope"> <el-tooltip class="item" effect="dark" content="查找該用戶" placement="top-start"> <router-link style="color: #00aaff;" :to="{name: 'User', params: { userId: scope.row.userId }}">{{scope.row.userId}}</router-link> </el-tooltip> <!-- <el-link type="primary" :to="{name: 'User', params: { userId: scope.row.userId }}" >{{scope.row.userId}}</el-link> --> </template> </el-table-column> </el-table>
多場景vue跳轉(zhuǎn)方法
// 字符串 <router-link to="apple"> to apple</router-link> // 對(duì)象 <router-link :to="{path:'apple'}"> to apple</router-link> // 命名路由 <router-link :to="{name: 'applename'}"> to apple</router-link> //直接路由帶查詢參數(shù)query,地址欄變成 /apple?color=red <router-link :to="{path: 'apple', query: {color: 'red' }}"> to apple</router-link> // 命名路由帶查詢參數(shù)query,地址欄變成/apple?color=red <router-link :to="{name: 'applename', query: {color: 'red' }}"> to apple</router-link> //直接路由帶路由參數(shù)params,params 不生效,如果提供了 path,params 會(huì)被忽略 <router-link :to="{path: 'apple', params: { color: 'red' }}"> to apple</router-link> // 命名路由帶路由參數(shù)params,地址欄是/apple/red <router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link> // 其他方式 <router-link :to="'/system/user/' + scope.row.userId" class="link-type"> <span>{{ scope.row.userId }}</span> </router-link>
方法比較多 這里我使用了
動(dòng)態(tài)賦值<router-link :to="...">動(dòng)態(tài)傳參
,to
里的值可以是一個(gè)字符串路徑,或者一個(gè)描述地址的對(duì)象
// 命名路由帶路由參數(shù)params,地址欄是/apple/red <router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link>
給不知道name參數(shù)從哪來的 提個(gè)醒 這個(gè)name里的參數(shù)的 子級(jí)頁面的name 也就是你需要跳轉(zhuǎn)的那個(gè)頁面 也就是路由跳轉(zhuǎn)
接收方法如下
export default { name: "User", components: { Treeselect }, data() { return {} created() { //每次切換頁面重新進(jìn)入次方法 此方法只用于頁面?zhèn)鲄⒏鶕?jù)userid查詢用戶 activated () {undefined const userId = this.$route.params && this.$route.params.userId; //userid是否為空 if (userId) { this.loading = true; //賦予userid queryParams查詢傳入查詢的字段 this.$route.params.userId接收的字段參數(shù) this.queryParams.userId = this.$route.params.userId; //我自己的搜索方法 this.handleQuery(); } }, methods: { } }
獲取參數(shù)方式:this.$route.params.userId
這個(gè)userId就是{name: 'User', params: { userId: scope.row.userId }} 里params下的userId
到此這篇關(guān)于vue如何跳轉(zhuǎn)頁簽傳參并查詢參數(shù)(保姆級(jí))的文章就介紹到這了,更多相關(guān)vue跳轉(zhuǎn)傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue3中使用router路由實(shí)現(xiàn)跳轉(zhuǎn)傳參的方法
- Vue路由跳轉(zhuǎn)傳參或者打開新頁面跳轉(zhuǎn)問題
- vue3.0?router路由跳轉(zhuǎn)傳參問題(router.push)
- vue項(xiàng)目實(shí)例中用query傳參如何實(shí)現(xiàn)跳轉(zhuǎn)效果
- vue3 攜帶參數(shù)跳轉(zhuǎn)|router傳參方式
- vue跳轉(zhuǎn)方式(打開新頁面)及傳參操作示例
- vue路由跳轉(zhuǎn)傳參數(shù)的方法
- vue路由對(duì)不同界面進(jìn)行傳參及跳轉(zhuǎn)的總結(jié)
相關(guān)文章
vue3解構(gòu)賦值失去響應(yīng)式引發(fā)的問題思考
這篇文章主要介紹了vue3解構(gòu)賦值失去響應(yīng)式引發(fā)的問題思考,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,感興趣的小伙伴可以參考一下2022-06-06vue-cli3在main.js中console.log()會(huì)報(bào)錯(cuò)的解決
這篇文章主要介紹了vue-cli3在main.js中console.log()會(huì)報(bào)錯(cuò)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04圖文詳解vue中proto文件的函數(shù)調(diào)用
這篇文章主要給大家介紹了vue中proto文件函數(shù)調(diào)用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-08-08針對(duì)Vue路由history模式下Nginx后臺(tái)配置操作
這篇文章主要介紹了針對(duì)Vue路由history模式下Nginx后臺(tái)配置操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10使用Vue實(shí)現(xiàn)Markdown文檔的展示和解析
在Vue項(xiàng)目中,Markdown文檔的使用越來越普遍,因此在Vue中如何進(jìn)行Markdown文檔展示與解析也成為了一個(gè)熱門話題,本文將介紹如何使用Vue實(shí)現(xiàn)Markdown文檔的展示和解析,文中通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-01-01vue 項(xiàng)目全屏插件screenfull使用案例
這篇文章主要介紹了vue 項(xiàng)目全屏插件screenfull使用案例,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12vue.js2.0點(diǎn)擊獲取自己的屬性和jquery方法
下面小編就為大家分享一篇vue.js2.0點(diǎn)擊獲取自己的屬性和jquery方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02