npm install vue-router

/**
 * 創(chuàng)建路由器并且暴露出去!
 * vue3中必須指定工作模式!
 *
 *  */
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/home',
  },

  {
    path: '/home',
    name: 'home',
    component: () => import('@/views/demo_route/home.vue'),
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('@/views/demo_route/about.vue'),
  },
  {
    path: '/news',
    name: 'news',
    component: () => import('@/views/demo_route/news.vue'),
  },
];
// 引入
const router = createRouter({
  // 路由器的工作模式
  history: createWebHistory(),
  routes,
});
// 暴露出去
export default router;

import router from './router';
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.use(router);
app.mount('#app');

<!--
 * @author: keep_di
 * @desc: 
* 路由中有設(shè)計(jì)好的一個(gè)激活樣式：active-class
-->
<script setup lang="ts">
  // RouterView
  import { RouterView, RouterLink } from 'vue-router';
</script>
<template>
  <div class="app">
    <h2 class="title">路由測(cè)試學(xué)習(xí)</h2>
    <hr />
    <ul class="nav">
      <RouterLink to="/home" active-class="nav_active">首頁(yè)</RouterLink>
      <RouterLink to="/about" active-class="nav_active">關(guān)于</RouterLink>
      <RouterLink to="/news" active-class="nav_active">新聞</RouterLink>
    </ul>
    <hr />
    <router-view class="content"></router-view>
  </div>
</template>

<!-- 第一種：to的字符串寫(xiě)法 -->
<router-link to="/home">主頁(yè)</router-link>

<!-- 第二種：to的name對(duì)象寫(xiě)法 -->
<router-link :to="{ name: 'home', params: { id: 123 } }">主頁(yè)</router-link>

import { useRoute, useRouter } from 'vue-router';
//導(dǎo)入能返回路由器和路由對(duì)象的方法！
const route = useRoute();
const router = useRouter();

router.push({ name: 'user', params: { user: '123', role: 'admin' } });

router.push({ name: 'user', query: { user: '123', role: 'admin' } });

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

router.go(-1); //回退
router.go(0); //刷新
router.go(1); //前進(jìn)

<script setup lang="ts">
import { toRefs } from "vue";
import { useRoute } from "vue-router";

// 使用 useRoute 獲取參數(shù)
const route = useRoute();
let {query} = route //獲取query參數(shù)
let {params} = route   //獲取params參數(shù)
</script>

<template>
   <div>
     {{params.name}}  {{params.age}}
     {{query.a}}  {{query.b}}
   </div>
</template>

const routes = [
  {
    path: '/user/:id', // 定義路徑參數(shù) id
    component: UserProfile,
  },
];

<script setup>
import { useRoute } from 'vue-router'
// 獲取路由實(shí)例
const route = useRoute()
// 直接獲取路徑參數(shù)（默認(rèn)是字符串類型）
const userId = route.params.id
// 如果需要數(shù)字類型，可手動(dòng)轉(zhuǎn)換
const userIdNum = Number(route.params.id)
</script>

<script setup>
import { useRoute, watch } from 'vue-router'

const route = useRoute()

// 監(jiān)聽(tīng) params 整體變化
watch(
  () => route.params,
  (newParams, oldParams) => {
    console.log('參數(shù)變化：', newParams.id)
    // 執(zhí)行參數(shù)變化后的邏輯（如重新請(qǐng)求數(shù)據(jù)）
  },
  { immediate: true } // 初始加載時(shí)立即執(zhí)行一次
)

// 只監(jiān)聽(tīng)某個(gè)具體參數(shù)（如 id）
watch(
  () => route.params.id,
  (newId, oldId) => {
    console.log('ID變化：', newId)
  }
)
</script>

import { RouteRecordRaw } from 'vue-router';
export const constantRoute: Array<RouteRecordRaw> = [
    {
        path: '/login',
        component: () => import('@/views/login/index.vue'),
        name: 'login'
    },
    {
        path: '/',
        component: () => import('@/views/home/index.vue'),
        name: 'layout'
    },
    {
        path: '/404',
        component: () => import('@/views/404/index.vue'),
        name: '404'
    },
    // 任意路由
    {
        path: '/pathMatch(.*)*',
        redirect: '/404',
        name: 'Any'
    }
]