詳解如何使用router-link對(duì)象方式傳遞參數(shù)?
疑問(wèn):(判斷和傳參)
點(diǎn)擊導(dǎo)航欄目,js如何判斷自己點(diǎn)擊的是哪個(gè)具體欄目?
它們是如何傳參的?
如何使用params,攜帶查詢參數(shù)?
效果圖解說(shuō):
A. 點(diǎn)擊選擇【屈原“查看詳情”】之前
B. 點(diǎn)擊選擇【屈原“查看詳情”】之后
要點(diǎn)總結(jié):
在vue-router中,有兩大對(duì)象被掛載到了實(shí)例this;
$route(只讀、具備信息的對(duì)象);
$router(具備功能的函數(shù))
查詢字符串:
1.去哪里 ?
<router-link :to="{name:'detail',query:{id:1}}"> xxx </router-link>
2.導(dǎo)航(查詢字符串path不用改)
{name:'detail',path:'/detail',組件}
3.去了干嘛?獲取路由參數(shù)(要注意是 query ,還是 params 和 對(duì)應(yīng)的 id 名? 是后者需要注意設(shè)置相關(guān)文件的id規(guī)則)
+ this.$route.query.id
path方式:
1.去哪里 ?
<router-link :to="{name:'detail',params:{name:1}}"> xxx </router-link>
2.導(dǎo)航(查詢字符串path不用改)
{name:'detail',path:'/detail/:name',組件}
3.去了干嘛?獲取路由參數(shù)(要注意是 query ,還是 params 和 對(duì)應(yīng)的 name 名? 是后者需要注意設(shè)置相關(guān)文件的id規(guī)則)
+ this.$route.params.id
相關(guān)文件代碼:
1. main.js文件
import Vue from 'vue'; import VueRouter from 'vue-router'; //引入主體(頁(yè)面初始化顯示) import App from './components/app.vue'; //一個(gè)個(gè)link對(duì)象 - 分類 import Detail from './components/detail.vue'; import List from './components/list.vue'; //安裝插件 Vue.use(VueRouter);//掛載屬性 //創(chuàng)建路由對(duì)象并配置路由規(guī)則 let router = new VueRouter({ //routes routes: [ //一個(gè)個(gè)link對(duì)象 {name: 'detail',path: '/detail',component: Detail}, //此處的path規(guī)則不受list.vue中的query(匹配參數(shù)規(guī)則的)影響 {name: 'list',path: '/list',component: List} ] }); /* new Vue 啟動(dòng) */ new Vue({ el: '#app', render: c => c(App), //讓vue知道我們的路由規(guī)則 router:router,//可以簡(jiǎn)寫(xiě)為router })
2. app.vue文件
<template> <div> <div class="header"> 頭部 - 導(dǎo)航欄目 <p> <router-link :to="{name:'detail'}">細(xì)節(jié)列表1</router-link> <router-link :to="{name:'list'}">英雄列表1</router-link> </p> </div> <!--留坑,非常重要--> <router-view class="main"></router-view> <div class="footer">底部 - 版權(quán)信息</div> </div> </template> <script> export default { data(){ return{ } }, methods:{ } } </script> <style scoped> .header,.main,.footer{text-align: center;padding: 10px;} .header{height:70px;background: yellowgreen;} .main{height:300px;background: skyblue;} .footer{height: 100px;background: hotpink;} </style>
3. list.vue文件
<template> <div> 我是list列表 <!-- :key是綁定器 --> <!-- query是查詢字符串,加查詢參數(shù) ,相當(dāng)于查詢規(guī)則;對(duì)比參考main.js關(guān)于路由配置path屬性--> <ul> <li v-for="(hero,index) in heros" :key="index"> {{hero.name}} <router-link :to="{name:'detail',query:{id:index}}">查看詳情</router-link> </li> </ul> </div> </template> <script> export default{ data(){ return{ heros:[{ name:'李白' },{ name:'杜甫' },{ name:'屈原' },{ name:'白居易' },{ name:'李清照' },{ name:'歐陽(yáng)修' }] } } } </script> <style scoped> ul,li{list-style: none;} </style>
4. detail.vue文件:(可以在控制臺(tái)查看打印結(jié)果)
<template> <div> 我是詳情 </div> </template> <script> export default{ data(){ return{ } },//DOM尚未生成 create(){ //獲取路由參數(shù) //vue-router中掛載兩個(gè)對(duì)象的屬性 //$route(信息數(shù)據(jù)) //$router(功能函數(shù)) /*console.log(this.$route.params);*/ console.log(this.$route.query); },//已經(jīng)將數(shù)據(jù)裝載到頁(yè)面上去了,DOM已經(jīng)生成 mounted(){ } } </script> <style> </style>
這就是本文的內(nèi)容。
以上所述是小編給大家介紹的如何使用router-link對(duì)象方式傳遞參數(shù)詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
有關(guān)vue 組件切換,動(dòng)態(tài)組件,組件緩存
這篇文章主要介紹了有關(guān)vue 組件切換,動(dòng)態(tài)組件,組件緩存,在組件化開(kāi)發(fā)模式下,我們會(huì)把整個(gè)項(xiàng)目拆分成很多組件,然后按照合理的方式組織起來(lái),達(dá)到預(yù)期效果,下面來(lái)看看文章的詳細(xì)內(nèi)容2021-11-11關(guān)于Vite項(xiàng)目打包后瀏覽器兼容性問(wèn)題的解決方案
本文主要介紹了關(guān)于Vite項(xiàng)目打包后瀏覽器兼容性問(wèn)題的解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08Vue如何實(shí)現(xiàn)數(shù)據(jù)的上移和下移
這篇文章主要介紹了Vue如何實(shí)現(xiàn)數(shù)據(jù)的上移和下移問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06vue2.0實(shí)現(xiàn)前端星星評(píng)分功能組件實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家介紹了vue2.0實(shí)現(xiàn)前端星星評(píng)分功能組件,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2018-02-02vite+vue3不清除瀏覽器緩存直接下載最新代碼的解決方案
vite+vue3項(xiàng)目發(fā)布后,瀏覽器上還是舊代碼,沒(méi)有及時(shí)更新到最新代碼,下面通過(guò)本文給大家分享vite+vue3不清除瀏覽器緩存直接下載最新代碼的解決方案,感興趣的朋友一起看看吧2024-06-06一篇文章教會(huì)你部署vue項(xiàng)目到docker
在前端開(kāi)發(fā)中,部署項(xiàng)目是我們經(jīng)常發(fā)生的事情,下面這篇文章主要給大家介紹了關(guān)于部署vue項(xiàng)目到docker的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04