04_Vue Router

官網：Vue Router | Vue.js 的官方路由 (vuejs.org)

安裝命令：npm install vue-router@4

1.添加兩個頁面\vuedemo\src\views\index.vue、\vuedemo\src\views\content.vue

2.添加\vuedemo\src\router\index.js文件用來定義路由規則

import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"

//定義路由
const routes = [
    {
        path: "/", // http://localhost:5173
        component: () => import("../views/index.vue")
    },
    {
        path: "/content", // http://localhost:5173/content
        component: () => import("../views/content.vue")
    },
]

const router = createRouter({
    //使用url的#符號之後的部分模擬url路徑的變化,因為不會觸發頁面刷新,所以不需要服務端支持
    //history: createWebHashHistory(),  //哈希模式
    history: createWebHistory(),
    routes }) 

export default router

main.js 修改

import { createApp } from 'vue'

//導入Pinia的createPinia方法,用於創建Pinia實例(狀態管理庫)
import { createPinia } from 'pinia'
//從 pinia-plugin-persistedstate 模塊中導入 piniaPluginPersistedstate
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import App from './App.vue'

import router from './router'

const pinia=createPinia();
//將插件添加到 pinia 實例上
pinia.use(piniaPluginPersistedstate)

const app=createApp(App);
app.use(pinia);
app.use(router);
app.mount('#app');

app.vue

<script setup>

</script>

<template>
<router-view/>
</template>

<style  scoped>

</style>

配置路徑別名@

修改路徑別名文件：\vuedemo\vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path' //導入 node.js path

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: { //配置路徑別名
      '@': path.resolve(__dirname, 'src')
    }
  }
})

 修改index.js路徑

//定義路由
const routes = [
    {
        path: "/", // http://localhost:5173
        component: () => import("@/views/index.vue")
    },
    {
        path: "/content", // http://localhost:5173/content
        component: () => import("@/views/content.vue")
    },
]

這裡就是把..修改成@

路徑提示設置

添加\vuedemo\jsconfig.json文件

{
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["src/*"] // 配置 @ 符號指向 src 目錄及其子目錄
      }
    }
  }

路徑傳遞參數

//定義路由
const routes = [
    {
        path: "/", // http://localhost:5173
        component: () => import("@/views/index.vue")
    },
    {
        path: "/content", // http://localhost:5173/content
        component: () => import("@/views/content.vue")
    },
    
    {
        path: "/user/:id", 
        component: () => import("@/views/user.vue")
    },
]

訪問路徑：

http://localhost:5173/content?name=張三&age=23

http://localhost:5173/user/5

<template>
<h3>Content頁面.....</h3>
<br>
Name: {{ $route.query.name }} <br>
Age: {{ $route.query.age }}
</template>

<template>
Id: {{ $route.params.id }} <br>
</template>

index.vue 轉到content.vue

index.vue

<script setup>
 import { useRouter } from 'vue-router';
        const router = useRouter()
        const goTo = ()=> {
            //router.push("/content?name=張三&age=23")
            router.push({ path: '/content', query: { name: '李四', age: 26 } })
        }
</script>

<template>
<h3>Index頁面......</h3>
<br>
<!-- 編程式導航 -->
<button @click="goTo()">編程式導航</button>
</template>

<style  scoped>

</style>

content.vue

<script setup>

</script>

<template>
<h3>Content頁面.....</h3>
<br>
Name: {{ $route.query.name }} <br>
Age: {{ $route.query.age }}
</template>

<style  scoped>

</style>

嵌套路由結合共用組件

添加頁面：

\vuedemo\src\views\vip.vue

\vuedemo\src\views\vip\default.vue

\vuedemo\src\views\vip\info.vue

\vuedemo\src\views\vip\order.vue

\vuedemo\src\views\svip.vue

修改index.js

import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"

//定義路由
const routes = [
    {
        path: "/", // http://localhost:5173
        alias:["/home","/index"],
        component: () => import("@/views/index.vue")
    },
    {
        path: "/content", // http://localhost:5173/content
        component: () => import("@/views/content.vue")
    },
    
    {
        path: "/user/:id", 
        component: () => import("@/views/user.vue")
    },
    {
        path: "/vip", 
        component: () => import("@/views/vip.vue"),
        children: [ // 子路由
            {
                path: '', // 預設頁 http://localhost:5173/vip
                component: import("@/views/vip/default.vue")
            },
            {
                path: 'order', // 會員訂單 http://localhost:5173/vip/order
                component: import("@/views/vip/order.vue")
            },
            {
                path: 'info', // 會員資料 http://localhost:5173/vip/info
                component: import("@/views/vip/info.vue")
            }
        ]
    },
    {
        path: "/svip", // http://localhost:5173/svip
        redirect: "/vip" // 重定向
        //redirect: { name: 'history', params: { id: '100', name: 'David' } }
    },
]

const router = createRouter({
    //使用url的#符號之後的部分模擬url路徑的變化,因為不會觸發頁面刷新,所以不需要服務端支持
    //history: createWebHashHistory(), 
    history: createWebHistory(),
    routes
})

export default router

訪問：http://localhost:5173/vip/、http://localhost:5173/vip/info、http://localhost:5173/svip/ (重定向)