首頁 > web前端 > js教程 > 主體

Vue.js路由的其他操作

php中世界最好的语言
發布: 2018-03-13 14:41:28
原創
1256 人瀏覽過

這次帶給大家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(&#39;apple&#39;)
或者
router.push({path: &#39;apple&#39;})
或者name
......
登入後複製

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

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

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

推薦閱讀:

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

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

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

#

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板