vue3路由使用场合

### Vue3 路由 使用场景及实现方式

#### 定义路由配置
在 Vue 3 中，为了定义应用程序的不同页面或视图间的导航路径和规则，需创建一个 `routes` 数组来声明各个路由对象。每个路由对象至少应包含两个属性：`path` 表示 URL 的一部分；`component` 则关联到组件实例。

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

此段代码展示了如何通过引入必要的模块并指定对应的组件文件位置来设置基础的路由表[^2]。

#### 动态路由匹配
当应用需要处理带有参数的动态链接时，可以在路径字符串中加入冒号前缀作为占位符表示可变的部分。例如 `/user/:id` 可以用来捕获用户的 ID 值，在目标组件内部可以通过 `$route.params.id` 获取该值。

<!-- 在模板里 -->
<router-link :to="{name:'User',params:{ id:user.id }}">查看</router-link>

// 对应在 JavaScript 文件里的写法
this.$router.push({ name: 'User', params: { id: user.id } })

这种机制允许开发者轻松构建支持复杂业务逻辑的应用程序结构[^1]。

#### 导航守卫
为了让用户体验更加流畅自然，通常会在页面之间过渡期间执行某些操作，比如权限验证、加载指示器显示等。Vue Router 提供了几种类型的钩子函数——全局前置守卫 (`beforeEach`)、独享组件级守卫以及路由内的确认离开回调(`beforeRouteLeave`) 来满足这些需求。

router.beforeEach((to, from, next) => {
  const isAuthenticated = /* ... */ true;
  
  if (!isAuthenticated && to.name !== "Login") {
    next({ name: "Login" });
  } else {
    next();
  }
});

上述例子展示了一个简单的身份认证检查过程，如果用户未登录则重定向至登录页[^3]。