router-link標(biāo)簽學(xué)習(xí)

1.指定跳轉(zhuǎn)路由，to屬性

<!--通過to來指定跳轉(zhuǎn)路由--> <router-link to="/home">Home</router-link><!-- 同上 --> <router-link :to="{ path: 'home' }">Home</router-link><!--還可以帶查詢參數(shù)，變成/profile?ID=10--> <router-link :to="{path:'/profile',query:{ID:10}}" tag="button"></router-link><!--在JS代碼，等價(jià)于上面的效果this.$router.push({path:'/profile',query:{ID:10} }) -->

2.更改router-link渲染標(biāo)簽，tag屬性

默認(rèn)情況下vue的router-link會(huì)渲染成a標(biāo)簽，有時(shí)我們可能想將router-link渲染成其他標(biāo)簽，這時(shí)我們就可以使用tag來指定渲染的標(biāo)簽了。

<!--通過tag來指定渲染標(biāo)簽--> <router-link to="/home" tag="button"></router-link>

3.修改路徑（replace形式），replace屬性

<!--replace,將使用router.replace()方法更改路徑，而非router.push()--> <!--這將無法用history.back()回退到上一瀏覽的頁面，不會(huì)留下 history 記錄，是直接的更改形式--> <router-link to="/home" replace>Home</router-link>

4.添加形式跳轉(zhuǎn)路由，append屬性

<!--假如當(dāng)前頁面為/home，點(diǎn)擊后將變成/home/my--> <router-link :to="{path:'my'}" append>Home</router-link>

5.獲取to屬性中附帶的查詢參數(shù)

在對(duì)應(yīng)組件中，通過$route.querys獲取傳遞的查詢參數(shù)

this.$route.query.ID

總結(jié)

以上是生活随笔為你收集整理的router-link标签学习的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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