Vue4 路由配置

安装

npm install vue-router@4

创建路由文件

新建 src/router/index.ts：

import { createRouter, createWebHistory } from "vue-router";
import About from '@/views/About.vue'
import Archive from '@/views/Archive.vue'
import Project from '@/views/Projects.vue'
import HomePage from '@/views/HomePage.vue'

const router = createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/about', component: About },
        { path: '/archive', component: Archive },
        { path: '/project', component: Project },
        { path: '/homePage', component: HomePage }
    ]
})

export default router

在 main.ts 中注册

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

在组件中使用

1. 设置路由出口（显示页面）

在 App.vue 或布局组件中设置：

<template>
    <div>
        <nav>导航菜单...</nav>
        <RouterView></RouterView>  <!-- 页面在这里显示 -->
    </div>
</template>

<script setup lang="ts">
import { RouterView } from 'vue-router';
</script>

2. 设置导航链接

<template>
    <nav>
        <router-link to="/homePage">首页</router-link>
        <router-link to="/about">关于</router-link>
        <router-link to="/archive">归档</router-link>
        <router-link to="/project">项目</router-link>
    </nav>
</template>

路由传参

路径参数

// 路由定义
{ path: '/user/:id', component: User }

// 跳转
<router-link to="/user/1001">用户1001</router-link>

// 获取参数
import { useRoute } from 'vue-router'
const route = useRoute()
const id = route.params.id

Query 参数

// 跳转
<router-link to="/user?id=1001">用户1001</router-link>

// 获取参数
const route = useRoute()
const id = route.query.id

编程式导航

import { useRouter } from 'vue-router'
const router = useRouter()

// 跳转
router.push('/homePage')
router.push({ path: '/homePage' })
router.push({ path: '/user', query: { id: 1001 } })

// 返回
router.back()
router.forward()

路由守卫（权限控制）

router.beforeEach((to, from, next) => {
    const isLoggedIn = localStorage.getItem('token')

    if (to.meta.requiresAuth && !isLoggedIn) {
        next('/login')  // 未登录，跳转登录页
    } else {
        next()  // 放行
    }
})