基礎範例

import { RouterLink, RouterView } from 'vue-router'
<router-link to="/">Link</router-link>  // router-link :to={name:'', param:''}
<router-view></router-view>

---

import {createRouter, createWebHistory} from 'vue-router';
import Home from './Home.vue';

const routes = [
		{path:'/', name:'Home', component:Home},
		{path:'/about', name:"About", component:()=>import('./About.vue')}
]

const router = createRouter({
	history:createWebHistory(),
	routes // 語法糖 -> routes:routes
});

export default router;

動態路由

const User = {
  template: '<div>User</div>',
}

const routes = [
	// 冒號後為參數
  { path: '/users/:id', component: User },
	{ path: '/users/:id/post/:postId', components:Post },
  // 與字串連接
	{ path: '/users/user:id', components:Post }
]

<script setup>
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

console.log(router.currentRoute.value.path)
console.log(route.params)

</script>
<template>
	<RouterLink :to="{name:'user', params:{id:12}}">User</RouterLink>
	{{ $route.param.id }}
</tempalte>

路由僅參數改變，則相同的組件將被重複使用(不會有生命週期)

watch(
 // route.params 是 reactive()
  () => route.params,
  (toParams, previousParams) => {
    // 对路由变化做出响应...
    console.log(toParams)
    console.log(previousParams)
    console.log('watch')
  }
)

或是用路由守衛

<script setup>
import { useRouter, useRoute, onBeforeRouteLeave, onBeforeRouteUpdate  } from 'vue-router'

async onBeforeRouteUpdate((to, from) => {
  console.log('update')
  console.log('to', to)
  console.log('from', from)
	if(to.params.id !== from.params.id) {
		userData.value = await fetch(...)
	}
})

onBeforeRouteLeave((to, from) => {
  console.log('leave')
  console.log('to', to)
  console.log('from', from)
  // return false 取消換頁
})
</script>

擷取所有路由或 404 Not found 路由

// https://...../some/not/found

path: '/:pathMatch',
name: 'NotFound',
component: () => import('../views/NotFound.vue')
// error

path: '/:pathMatch(.*)',
name: 'NotFound',
component: () => import('../views/NotFound.vue')
route.params.pathMath = 'some/not/found'

path: '/:pathMatch(.*)*',
name: 'NotFound',
component: () => import('../views/NotFound.vue')
route.params.pathMath = ['some', 'not', 'found']

path: '/:pathMatch' 和 path: '/:pathMatch(.*)' 差異
在Vue Router中，path: '/:pathMatch' 和 path: '/:pathMatch(.*)' 兩者之間有一些重要的區別。
1. path: '/:pathMatch'：這個路由規則使用了冒號 :，表示這是一個動態路由參數。這意味著路徑中的任何內容都將匹配到這個參數，不論是單詞、斜槓或其他字符。這個參數將匹配到路由的params屬性中，你可以在組件中訪問它，以根據實際請求的路徑來動態呈現內容。
1. path: '/:pathMatch(.*)'：在這個路由規則中，我們同樣使用了動態路由參數 :pathMatch，但是不同的是，我們在括號中使用了(.*)正則表達式。這表示它將匹配路由中的任何內容，但只有一個捕獲組（capturing group），並且會保留整個路徑字符串。這樣，它不會將斜槓視為分隔符，而是將整個路徑當作一個值，並且將其傳遞到params屬性中。
總結來說，path: '/:pathMatch' 將捕獲單個路由段，而 path: '/:pathMatch(.*)' 將捕獲整個路由路徑作為單個值。你可以根據你的項目需求選擇使用哪一種路由規則。

router.push({
  name: 'NotFound',
  // 保留目前路徑並刪除第一個字符，以避免目標 URL 以 // 開頭。
  // route.path = '/some/not/found'
  params: { pathMatch: route.path.substring(1).split('/') },
  query: route.query,
  hash: route.hash,
})

命名路由

切換路由的方式除了 path 還能使用 name

{
	path:'/user/:id',
	name:'user',
	components:()=> import(....)
}

<RouterLink to="user/1">

<RouterLink :to="{name:'user', params:{ id:1 }}">

路由的匹配語法

正則表達式

const routes = [
  // /:orderId -> 僅匹配數字
  { path: '/:orderId(\d+)' },
  // /:productName -> 符合其他任何內容
  { path: '/:productName' },
]

可重複的參數 (分割路徑為陣列)

const routes = [
  // /:chapters ->  匹配 /one, /one/two, /one/two/three, 等
  { path: '/:chapters+' },
  // /:chapters -> 匹配 /, /one, /one/two, /one/two/three, 等
  { path: '/:chapters*' },
]

// 给定 { path: '/:chapters*', name: 'chapters' },
router.resolve({ name: 'chapters', params: { chapters: [] } }).href
// 产生 /
router.resolve({ name: 'chapters', params: { chapters: ['a', 'b'] } }).href
// 产生 /a/b

// 给定 { path: '/:chapters+', name: 'chapters' },
router.resolve({ name: 'chapters', params: { chapters: [] } }).href
// 抛出错误，因为  chapters  为空

Sensitive 與 strict 路由配置

Sensitive 區分大小寫

strict 區分結尾是否有 /

const router = createRouter({
  history: createWebHistory(),
  routes: [
   // 將符合 /users/posva 而非： 
   // - /users/posva/ 當 strict: true 
   // - /Users/posva 當 sensitive: true
    { path: '/users/:id', sensitive: true },
   // 將符合 /users, /Users, 以及 /users/42 而非 /users/ 或 /users/42/
    { path: '/users/:id?' },
  ],
  strict: true, // applies to all routes
})

可選參數

?: 參數可為 0 個或 1 個

*: 參數可為 0 個或 1 個

const routes = [
  // 匹配 /users 和 /users/posva
  { path: '/users/:userId?' },
  // 匹配 /users 和 /users/42
  { path: '/users/:userId(\d+)?' },
]

巢狀路由

子路由 path 不要使用 / 做開頭, / 被視為根路徑 ( https://……/ )

{
 path: '/user/:id',
 name: 'user',
 component: () => import('../views/UserView.vue'),
 children: [
   { path: 'post', name:'user-post', component: () => import('../views/UserPost.vue')},
	 // 子路由根路徑使用空字串
	 { path: '', name:'user-name', component: () => import('../views/UserChild.vue')}
 ]
}

// ../user/12/post

// UserView

<tempalte>
	<RouterLink to=""></RouterLink>
	<RouterView />
</template>

子路由命名

// App.vue
<RouterLink :to="{name:'user-name', params:{id:12}}" />

// router/index.js
{
 path: '/user/:id',
 // name: 'user', 子路由有命名則不需要命名
 component: () => import('../views/UserView.vue'),
 children: [
	 { path: '', name:'user-name', component: () => import('../views/UserChild.vue')}
 ]
}

父層路由與子路由皆有命名

// App.vue
<RouterLink :to="{name:'user'}" />
// 不會顯示子路由，但重新整理會顯示

// router/index.js
{
 path: '/user/:id',
 name: 'user',
 component: () => import('../views/UserView.vue'),
 children: [
	 { path: '', name:'user-name', component: () => import('../views/UserChild.vue')}
 ]
}

程式化導航(Programmatic Navigation)

當你點選 <router-link> 時，內部會呼叫這個方法，所以點選 <router-link :to="..."> 相當於呼叫 router.push(...) ：

// literal string path
router.push('/users/eduardo')

// object with path
router.push({ path: '/users/eduardo' })

// named route with params to let the router build the url
router.push({ name: 'user', params: { username: 'eduardo' } })

// with query, resulting in /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// with hash, resulting in /about#team
router.push({ path: '/about', hash: '#team' })

router.push 使用 path 會忽略 params (query 不會被忽略)

params 的值會被轉型為 Number | String

替換當前位置

router.push(…) 有瀏覽器歷史紀錄 (從上一頁跳到下一頁)

router.replace(…) 不會有瀏覽器歷史紀錄 (取代當前頁面紀錄)

// 以下結果相同
<router-link :to="..." replace />

router.push({ path: '/home', replace: true })

router.replace({ path: '/home' })

前往

// 下一頁, 等同 router.forward()
router.go(1)

// 上一頁, 等同 router.back()
router.go(-1)

// 超過無效
router.go(100)
router.go(-100)

參考：https://developer.mozilla.org/en-US/docs/Web/API/History_API

命名視圖

同一層多個 RouterView

<RouterView />
<RouterView name="LeftBar" />
// name 沒有 RightView 則忽略
<RouterView name="RightView" />

{
	path:'/',
	components:{
		default:()=> import(../Home.vue),
		LeftBar:()=> import(../Left.vue),
		RightView:()=> import(../Right.vue),
	}
},
{
	path:'/other',
	components:{
		default:()=> import(../Other.vue),
		LeftBar:()=> import(../OtherLeft.vue),
	}
}

重定向(轉址)和別名

網址輸入 https://....../home 重定向至 https://....../

const routes = [
	{ path: '/', component: Home },
	{ path: '/home', redirect: '/' }
]

name

const routes = [
	{ path: '/', name:'homepage', component: Home },
	{ path: '/home', redirect: {name:'homepage'} }
]

函式

const routes = [
  {
    // /search/screens -> /search?q=screens
    path: '/search/:searchText',
    redirect: (to) => {
      // 方法接收目標路由作為參數
      // return 重定向的字串路徑/路徑對象
      return { path: '/search', query: { q: to.params.searchText } }
    },
  },
  {
    path: '/search',
    // ...
  },
]

相對

const routes = [
  {
    // 將總是把/users/123/posts重新導向到/users/123/profile。
    path: '/users/:id/posts',
    redirect: to => {
      // 此函數接收目標路由作為參數 
			// 相對位置不以 / 開頭 
			// 或 { path: 'profile'}
      return 'profile'
    },
  },
]

別名

https://…./home 等同於 htttps://…../

跟重定向不同的是網址會保留

const routes = [{ path: '/', component: Homepage, alias: '/home' }]

const routes = [
	{path:'/users', components:Homepage, alias:['/people', '/list']}
]

如果你的路由有參數，請確保在任何絕對別名中包含它們：

const routes = [
	{path:'/users/:id', components:Homepage, alias:['/people:id', '/list', '/:id']}
]

/*  
	/people/12
  /users/12
	/12
   ---
  /list  不會顯示(404 Not Found)
*/

巢狀路由

巢狀路由使用 / 為絕對路徑

const routes = [
	{
		path:'/users', 
		component:Homepage,
		children:[
			{path:'list', component:'....', alias:['/people', '']}
		]
	}
]

/* 
	/people
	/users/list
	/users
*/

傳遞 props

設定 props:true 替換 $route.params

//    https//..../user/12
defineProps({
    id:String
})

// <div>props: {{$route.params.id }}</div>
<div>prop:{{ id }}</div>

---

const routes = [{ path: '/user/:id', component: User, props: true }]

命名視圖

每一個命名視圖 props 都要設定

const routes = [
  {
    path: '/user/:id',
    components: { default: User, sidebar: Sidebar },
    props: { default: true, sidebar: false }
  }
]

函式

// https://..../search?q=vue

const routes = [
  {
    path: '/search',
    component: SearchUser,
    //  { query:vue }
    props: route => ({ query: route.query.q })
  }
]

definedProps({
	query:String
})


<div>{{ qu }}</div>

物件模式

只能傳遞靜態值


const routes = [
  {
    path: '/search',
    component: SearchUser,
    props: {something:'string'}
  }
]

混用

const routes = [
  {
    path: '/user/:id',
    component: User,
    props: (route)=>({
			something:'string',
			...route.param
		})
  }
]

近期文章:

TypeScript 基礎

快速上手 Git

Pinia

Vue Router

Nuxt Seo 設定

關於:

最近正在看:

程式

其他