這次帶給大家Vue.js路由的其他操作,使用Vue.js路由其他操作的注意事項有哪些,下面就是實戰案例,一起來看一下。
基於目前路徑下,跳到apple
<router-link to="apple">to apple</router-link> 上面的和下面的区别 <router-link :to="{path:'banana'}">to banana</router-link>
如果要跳到根目錄,在apple前面加上/
<router-link to="/apple">to apple</router-link> 上面的和下面的区别 <router-link :to="{path:'banana'}">to banana</router-link>
如果綁定的話,我們也可以動態的修改路徑
<template> <div id="app"> <router-link :to="path">to apple</router-link> ...... </div></template><script> export default { data () { return { path: 'apple' } } }</script>
如果綁定的話,不想動態修改路徑,我們也可以直接寫死,
注意:apple一定要用單引號括起來,不然他會去data裡面找apple,會報找不到物件的error
<router-link :to="'apple'">to apple</router-link>
也可以傳遞參數
<router-link :to="{path:'banana',param:{color:'yellow'}}">to banana</router-link>
透過tag,將link變成li標籤,當然也可以設定變成其他標籤
<router-link :to="'apple'" tag="li">to apple</router-link>
*以上都屬於聲明式導航
下面感受下編程式導航
可以透過push,跳到特定的頁面
router.push('apple') 或者 router.push({path: 'apple'}) 或者name ......
應用場景:
當我們每次路由切換的時候,為他設定一些操作
比方說:檢查使用者的登入狀態,如果使用者未登入,就透過編程式導航跳到登入介面
router.beforeEach(router.push('登入介面'))
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
#以上是Vue.js路由的其他操作的詳細內容。更多資訊請關注PHP中文網其他相關文章!