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

Vue Router（2）

news 2025/5/3 7:07:07

嵌套路由

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

嵌套路由的核心思想：
父路由组件包含一个或多个子路由出口
子路由在父路由的上下文中渲染
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)