iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 24
2
Modern Web

忍住不打牌位,只要30天VueJS帶你上A牌系列 第 24

Day24 你要去哪裡? - Vue Router 路由-1

開發一個網站,架設路由是一定不可能少的,所以這篇就格外重要,我們趕快來看看吧!!

我們在新增專案實有透過CLI來安裝路由,安裝的方法我就跳過了,起手我們先定義路線吧。
https://ithelp.ithome.com.tw/upload/images/20200923/20129187VHbf5OQ3Ur.png

路由的路線設定:

路由的路線裡面有些設定:
path:設定路由的路徑
name:路由的名稱
component:路由對應到的元件
redirect: 設定重新轉向路徑
meta: { requireAuth: true }: meta為路由元訊息,requireAuth是指是否需要驗證自定義參數
childern: 為該路由的子路由
hidden: 白話來說就是透過 hidden 的值判斷是否渲染該路由入口的開關而已

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/',
    name: 'redirect',
    redirect: '/home/dashboard'
  },
  {
    path: '/home',
    component: Layout,
    meta: { requireAuth: true },
    childern: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: () => import('@/views/Dashboard.vue')
      },
      {
        path: 'user/:userId',
        name: 'User',
        component: () => import('@/views/User.vue')
      },
      {
        path: 'setting',
        name: 'Setting',
        component: () => import('@/views/Setting.vue')
      }
    ]
  },
  {
    path: '/404',
    name: '404',
    component: () => import('@/components/Page404'),
    hidden: true
  },
  {
    path: '*',
    redirect: '/404',
    hidden: true
  }
]

捕獲所有路由或當找不到路由

通常路由會根據 / 後的字串匹配所有路線 path 的字串,當想捕獲任意路徑,我們就可以使用通配符*
這通常用於當client端路由錯誤時,重新導向 404 page。

{
    path: '*',
    redirect: '/404',
    hidden: true
}

路由視圖 router-view

設定完路線,我們該來把路由設置一個顯示的出口吧,也就是router-view,我們也可以在標籤上使用name,name屬性會負責渲染相對設定組件,範例在這邊

// App.vue
<template>
  <div id="app">
    <router-view></router-view>
    <router-view name="a"></router-view>
    <router-view name="b"></router-view>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

在模板中切換路由路徑 router-link

作法跟href一樣,類似<a href="/home/dashboard"></a>

<router-link to="/home/dashboard">儀錶板</router-link>

使用具名路由
你要用name屬性來匹配也是可以,畢竟陳時中部長也說口罩要實名制(誤
要有個認知:
1.name屬性值必須唯一,VueRouter才能打到相對應的路徑
2.VueRouter是以name找到相對應路徑,渲染其元件,所以網址也是顯示path的路徑,而非name的屬性值

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

在JavaScript程式裡切換路由路徑

你可能看過Location.replace(),現在教你Vue Router正確的用法

this.$router.push('/login')
this.$router.push({ path: 'login' })
this.$router.push({ name: 'user', params: { userId: '123' }})
this.$router.push({ path: 'user', query: { userName: 'Vince' }})

注意:如果提供了path,params會被忽略

const userId = '123'
this.$router.push({ name: 'user', params: { userId }}) // -> /user/123
this.$router.push({ path: `/user/${userId}` }) // -> /user/123
// params會被忽略
this.$router.push({ path: '/user', params: { userId }}) // -> /user

router.replace:
router.push很像,唯一不同是,它不會向history添加新記錄,而是跟它的方法名一樣替換掉當前的history記錄。
router.go:
這方法須帶入一個整入,等於是點擊瀏覽器的上一頁下一頁

this.$router.go(1)
this.$router.go(-1)

今天就先上到這邊,明天我們繼續講路由唷!!

有任何問題歡迎下方留言,如果喜歡我的文章別忘了按讚、訂閱追蹤加分享唷!!
---我是分隔線-----------------------------------------------------------
PollyPO技術-前端設計轉前端工程師-JS踩坑雜記 30 天
喬依司-實作經典 JavaScript 30
五百億-Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理
eien_zheng-前端小嘍嘍的Golang學習旅程_The journey of learning Golang


上一篇
Day23 介紹vue風格指南-命名原則
下一篇
Day25 你要去哪裡? - Vue Router 路由-2
系列文
忍住不打牌位,只要30天VueJS帶你上A牌30

1 則留言

0
PollyPO技術
iT邦新手 5 級 ‧ 2020-10-03 03:18:46

團長大大~~有錯字~XD
是「捕獲所路由」~不是所油喔~(請叫我抓錯字小精靈

感謝提醒

我要留言

立即登入留言