vue3中vue-router安装配置使用全过程

npm install vue-router

/**
 * 创建路由器并且暴露出去!
 * 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: 
* 路由中有设计好的一个激活样式：active-class
-->
<script setup lang="ts">
  // RouterView
  import { RouterView, RouterLink } from 'vue-router';
</script>
<template>
  <div class="app">
    <h2 class="title">路由测试学习</h2>
    <hr />
    <ul class="nav">
      <RouterLink to="/home" active-class="nav_active">首页</RouterLink>
      <RouterLink to="/about" active-class="nav_active">关于</RouterLink>
      <RouterLink to="/news" active-class="nav_active">新闻</RouterLink>
    </ul>
    <hr />
    <router-view class="content"></router-view>
  </div>
</template>

<!-- 第一种：to的字符串写法 -->
<router-link to="/home">主页</router-link>

<!-- 第二种：to的name对象写法 -->
<router-link :to="{ name: 'home', params: { id: 123 } }">主页</router-link>

import { useRoute, useRouter } from 'vue-router';
//导入能返回路由器和路由对象的方法！
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); //前进

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

// 使用 useRoute 获取参数
const route = useRoute();
let {query} = route //获取query参数
let {params} = route   //获取params参数
</script>

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

const routes = [
  {
    path: '/user/:id', // 定义路径参数 id
    component: UserProfile,
  },
];

<script setup>
import { useRoute } from 'vue-router'
// 获取路由实例
const route = useRoute()
// 直接获取路径参数（默认是字符串类型）
const userId = route.params.id
// 如果需要数字类型，可手动转换
const userIdNum = Number(route.params.id)
</script>

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

const route = useRoute()

// 监听 params 整体变化
watch(
  () => route.params,
  (newParams, oldParams) => {
    console.log('参数变化：', newParams.id)
    // 执行参数变化后的逻辑（如重新请求数据）
  },
  { immediate: true } // 初始加载时立即执行一次
)

// 只监听某个具体参数（如 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'
    }
]