Vue.js路由的其他操作

這次帶給大家Vue.js路由的其他操作，使用Vue.js路由其他操作的注意事項有哪些，下面就是實戰案例，一起來看一下。

基於目前路徑下,跳到apple

   <router-link to="apple">to apple</router-link>
    上面的和下面的区别    <router-link :to="{path:&#39;banana&#39;}">to banana</router-link>

如果要跳到根目錄,在apple前面加上/

   <router-link to="/apple">to apple</router-link>
    上面的和下面的区别    <router-link :to="{path:&#39;banana&#39;}">to banana</router-link>

如果綁定的話,我們也可以動態的修改路徑

<template>
  <div id="app">
    <router-link :to="path">to apple</router-link>
    ......  </div></template><script>
  export default {
    data () {      return {        path: &#39;apple&#39;
      }
    }
  }</script>

如果綁定的話,不想動態修改路徑,我們也可以直接寫死,

注意:apple一定要用單引號括起來,不然他會去data裡面找apple,會報找不到物件的error

<router-link :to="&#39;apple&#39;">to apple</router-link>

也可以傳遞參數

<router-link :to="{path:&#39;banana&#39;,param:{color:&#39;yellow&#39;}}">to banana</router-link>

透過tag,將link變成li標籤,當然也可以設定變成其他標籤

<router-link :to="&#39;apple&#39;" tag="li">to apple</router-link>

*以上都屬於聲明式導航
下面感受下編程式導航
可以透過push,跳到特定的頁面

router.push('apple')
或者
router.push({path: 'apple'})
或者name
......

應用場景:
當我們每次路由切換的時候,為他設定一些操作

比方說:檢查使用者的登入狀態,如果使用者未登入,就透過編程式導航跳到登入介面
router.beforeEach(router.push('登入介面'))

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Vue.js的vue標籤屬性與條件渲染

Vue.js的清單渲染v -for 陣列物件子元件

使用Vue.js有哪些注意事項

#

以上是Vue.js路由的其他操作的詳細內容。更多資訊請關注PHP中文網其他相關文章！