簡單的Vue路由

2021-10-09 07:05:34 字數 829 閱讀 2713

路由可以理解為路徑的來由,通過routes來構建路由物件註冊進router中形成路由例項,再將路由例項註冊到vue中。路由物件中必不可少的有path:路由的虛擬位址,component:路由對應的元件。vue提供的導航元件 router-link 最終會渲染成a標籤 to就是href目標位址,通過router-link跳轉到to屬性對應的內容中。路由對應的元件會渲染在router-view處。

定義路由對應的元件

let homecomponent =

let documentcomponent =

let downloadcomponent =

構造路由物件將路由元件註冊進路由
let routes =[,

,,]

構造vue路由例項
let router =

newvuerouter()

;

將vue路由例項註冊到vue中
let vm=

newvue(,

router })

;

在vue的作用區域處使用元件
>

"/">首頁<

/router-link>

"/document"

>文件<

/router-link>

"/download"

/router-link>

<

!-- 路由對應的元件會顯到此處 --

>

<

/router-view>

<

/div>

vue路由1 0 1 2 簡單的路由跳轉

1.實現乙個簡單的路由跳轉 如果把views該為pages,則router.js中的views也要改為pages 1.1 pages資料夾下配置乙個detail.vue的頁面 注 乙個頁面只能有乙個div detail 1.2 在router.js中配置一下 routes path name hom...

vue簡單路由(二)

在實際專案中我們會碰到多層巢狀的元件組合而成,但是我們如何實現巢狀路由呢?因此我們需要在 vuerouter 的引數中使用 children 配置,這樣就可以很好的實現路由巢狀。index.html,只有乙個路由出口 main.js,路由的重定向,就會在頁面一載入的時候,就會將home元件顯示出來,...

vue中路由的簡單使用

vue中路由 vue router 的使用 router.js中配置路由規則,專案中所有的路由規則通常都統一配置到同乙個檔案中,習慣將這個檔案命名為router.js,router.js內容如下 import vue from vue import router from vue router im...