vue簡單路由(二)

2022-08-10 09:33:12 字數 757 閱讀 6761

在實際專案中我們會碰到多層巢狀的元件組合而成,但是我們如何實現巢狀路由呢?因此我們需要在 vuerouter 的引數中使用 children 配置,這樣就可以很好的實現路由巢狀。

index.html,只有乙個路由出口

main.js,路由的重定向,就會在頁面一載入的時候,就會將home元件顯示出來,因為重定向指向了home元件,redirect的指向與path的必須一致。children裡面是子路由,當然子路由裡面還可以繼續巢狀子路由。

import vue from 'vue'

import vuerouter from 'vue-router'

vue.use(vuerouter)

//引入兩個元件

import home from "./home.vue"

import game from "./game.vue"

//定義路由

const routes = [

,//重定向,指向了home元件

] }]

//建立路由例項

const router = new vuerouter()

new vue(,

methods: ,

router

})

home.vue,點選顯示就會將子路由顯示在出來,子路由的出口必須在父路由裡面,否則子路由無法顯示。

顯示			

game.vue

執行後的結果:

點選顯示後:

Vue2 0 簡單路由跳轉(二)

重大福利 阿里雲伺服器優惠 vue 路由文件位址 用 vue.js vue router 建立單頁應用,是非常簡單的。使用 vue.js 我們已經可以通過組合元件來組成應用程式,當你要把 vue router 新增進來,我們需要做的是,將元件 components 對映到路由 routes 然後告訴...

簡單的Vue路由

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

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...