[DAY5]vue router 簡單應用 | Click router push
tags:vuevue-route是用來跳轉頁面切換和傳值的東西基本用法一開始我們先找到專案裡的,src/router裡的index.js,這檔案是用來負責元件切換、設定路由的地方。下圖是index.jsimportlifecirclefrom../views/lifecircle.vue是指引入該元件,之後在下方打{path:/lifecircle,component:lifecircle},path輸入自己定義的路徑名稱。component是輸入上方宣告的元件名稱。接著我們到App.vue
vue-route是用來跳轉頁面切換和傳值的東西
基本用法一開始我們先找到專案裡的,src/router裡的index.js,這檔案是用來負責元件切換、設定路由的地方。下圖是index.js
import lifecircle from ../views/lifecircle.vue是指引入該元件,之後在下方打
{ path: /lifecircle, component: lifecircle },path輸入自己定義的路徑名稱。component是輸入上方宣告的元件名稱。
接著我們到App.vue
<router-link to="/lifecircle">lifecircle</router-link>|router-link標籤有點類似跳頁的按鈕,to裡面放剛才在index.js設定的path名稱
表示按下router-link標籤切換到的頁面,會顯示在此,如果沒有則跳頁會沒效果
巢狀路由還有一種用法叫巢狀路由,一個路由下還有其他路由我們在一個路由(/xxx)下加一個children包住其他路由(about和von)接著切換到元件(xxx.vue)就能達到巢狀路由的效果
router.push 用法除了router-link可以跳轉頁面外,還可以用router.push來達到此效果,但不管是用哪一種方法,都一定要在src/router/index.js做設定才能有效果
在元件內新增一個button
<button class="btn btn-danger" @click="$router.push({path:/xxx/about})">toto</button>用 @click來觸發$router.push({path:/xxx/about})的動作
route 傳值route傳值有分,params和query兩種方式,跳轉頁面...