router-link標簽學習

1.指定跳轉路由，to屬性

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

2.更改router-link渲染標簽，tag屬性

默認情況下vue的router-link會渲染成a標簽，有時我們可能想將router-link渲染成其他標簽，這時我們就可以使用tag來指定渲染的標簽了。

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

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

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

4.添加形式跳轉路由，append屬性

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

5.獲取to屬性中附帶的查詢參數

在對應組件中，通過$route.querys獲取傳遞的查詢參數

this.$route.query.ID

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。