当前位置：首页 > news >正文

Vue Router（2）

news 来源：原创 2025/6/26 18:40:29

嵌套路由

在父路由组件内部渲染子路由组件，形成层次化的路由结构。

嵌套路由的核心思想：
父路由组件包含一个或多个子路由出口
子路由在父路由的上下文中渲染
URL路径反映路由的层次结构

const routes = [
  {
    path: '/parent',
    component: Parent,
    children: [
      { path: '', component: ParentDefault },
      { path: 'child', component: Child }
    ]
  }
]

// Parent.vue 
<template>
  <div>
    <h2>Parent Component</h2>
    <!-- 子路由将在这里渲染 -->
    <router-view></router-view>
  </div>
</template>

命名路由

可以通过名称而不是路径来引用路由，提高了代码的可维护性和灵活性。

核心特点：
为路由配置分配唯一的名称标识符
通过名称而非硬编码路径进行导航
简化路径更改时的维护工作
支持参数化路由的便捷引用
params 的自动编码/解码

const routes = [
  {
    path: '/user/:id',
    name: 'user-profile', // 命名路由
    component: UserProfile
  }
]

// 导航时使用
router.push({ name: 'user-profile', params: { id: 123 } })

编程式导航

通过编写代码来控制应用的路由跳转，提供了灵活的路由控制方式。

核心特点：
通过JavaScript函数调用触发导航
支持条件导航和动态路径生成
可以在导航前后执行额外逻辑
适用于表单提交、权限验证等场景

导航到不同位置

// 基本导航
router.push('/home') // 字符串路径
router.push({ path: '/home' }) // 路径对象
router.push({ name: 'home' }) // 命名路由

// 带参数
router.push({ name: 'user', params: { id: '123' } })
router.push({ path: '/user/123' })
router.push({ path: '/user', query: { id: '123' } }) //带查询参数，结果是/user?id=123
router.push({ path: '/user', hash: '#team' }) //带 hash，结果是 /user#team

// 替换当前历史记录(无后退)
router.replace({ path: '/login' })

// 历史记录前进/后退
router.go(1) // 前进
router.go(-1) // 后退

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path

const username = 'eduardo'
// 我们可以手动建立 url，但我们必须自己处理编码
router.push(`/user/${username}`) // -> /user/eduardo
// 同样
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user

当指定 params 时，可提供 string 或 number 参数（或者对于可重复的参数可提供一个数组）。任何其他类型（如对象、布尔等）都将被自动字符串化。对于可选参数，你可以提供一个空字符串（""）或 null 来移除它。

由于属性 to 与 router.push 接受的对象种类相同，所以两者的规则完全相同。

替换当前位置

作用类似于 router.push ，但不同之处在于导航时不会向 history 添加新记录，而是取代了当前的条目

声明式	编程式
`<router-link :to="..." replace>`	`router.replace(...)`

也可以在传递给时 router.push 的 to 参数中增加一个属性 replace: true

router.push({ path:'/home',replace:true })
//等价于
router.replace({ path:'/home' })

横跨历史

使用一个整数为参数，表示在历史堆栈中前进或者后退了多少步，类似于 window.history.go(n)

// 向前移动一条记录，与 router.forward() 相同
router.go(1)

// 返回一条记录，与 router.back() 相同
router.go(-1)

// 前进 3 条记录
router.go(3)

// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)