前端泥瓦匠

Appearance

Return to top
On this page

动态路由基本匹配

很多时候我们需要将给定匹配模式的路由映射到同一个组件： 例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但是用户的 ID 是不同的； 在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数；

javascript
// 映射表
{
    path:'/user/:id',
    component:()=>import('../pages/User.vue')
}
1
2
3
4
5

router-link 跳转

vue
<router-link to="/user/123"></router-link>
1

获取动态路由的值

User 中如何获取到对应的值呢 在 template 中，直接通过 $route.params 获取值；

  • 在 created 中，通过 this.$route.params 获取值；
  • 在 setup 中，我们要使用 vue-router 库给我们提供的一个 hook useRoute；
    • 该 Hook 会返回一个 Route 对象，对象中保存着当前路由相关的值；
vue
<template>
    <div>
        <h2>用户界面 {{$route.params.id}}</h2>
    </div>
</template>
1
2
3
4
5
javascript
export default {
created() {
    console.log(this.$route.params.id)
},
setup() {
    const route = useRoute()
    console.log(route)
    console.log(route.params.id)
}
1
2
3
4
5
6
7
8
9

匹配多个参数

javascript
// 映射表
{
    path:'/user/:id/:info',
    component:()=>import('../pages/User.vue')
}

this.$route.params => {id:'xxx',info:'yyy'}
1
2
3
4
5
6
7

NotFound

对于哪些没有匹配到的路由，我们通常会匹配到固定的某个页面 比如 NotFound 的错误页面中，这个时候我们可编写一个动态路由用于匹配所有的页面；

javascript
// 映射表
{
    path:'/:pathMatch(.*)',
    component:()=>import('../pages/User.vue')
}
1
2
3
4
5

获取到传入的参数

$route.params.pathMatch

匹配规则加* 

Not Found: [ "user"， "hahah", "123"] => path:'/:pathMatch（.*）*"，
Not Found: user/hahah/123 => path:'/:pathMatch(.*）"，
1
2

路由的嵌套

目前我们匹配的 Home、About、User 等都属于底层路由，我们在它们之间可以来回进行切换； 但是呢，我们 Home 页面本身，也可能会在多个组件之间来回切换：

  • 比如 Home 中包括 Product、Message，它们可以在 Home 内部来回切换； 这个时候我们就需要使用嵌套路由，在 Home 中也使用 router-view 来占位之后需要渲染的组件；

路由的嵌套配置

javascript
{
path: '/home',
component:()=> import(/* webpackChunkName:"home-chunk "*/"./pages/Home.vue"）,
children:[
    {
        path:
        redirect: "/home/product'
    },
    {
        path:'product',
        component: ()=> import('../pages/HomeProduct.vue"）
    },
    {
       path:'message',
       component: (）=>import('../pages/HomeMessage.vue"）
    }
],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

代码的页面跳转

使用 push 的特点是压入一个新的页面，那么在用户点击返回时，上一个页面还可以回退，但是如果我们希望当前 页面是一个替换操作，那么可以使用 replace

vue
<router-link to="/profile"></router-link>
<router-link to="/profile" replace></router-link>
1
2

vue2

javascript
jumpToProfile(){
    // 直接传入值
    this.$router.push('/profile')
    // 传入一个对象
    this.$router.push({
        path:'/profile'
    })
}
1
2
3
4
5
6
7
8

vue3

javascript
const router = useRouter()
const jumpToProfile = router.replace('/profile")
1
2

query 方式的参数

javascript
jumpToProfile() {
  this.$router.push(
    path: "/profile",
    query:{ name:"why", age: 18 }
  })
}
1
2
3
4
5
6

在界面中通过 $route.query 来获取参数：

vue
<h2>query: {{ $route.query.name }}-{{ $route.query.age }}</h2>
1

页面的前进后退

go

javascript
// 向前移动一条记录，与 router.forward() 相同
router.go(1)
// 返回一条记录，与router.back()• 相同
router.go(-1)
// 前进3 条记录
router.go(3)
// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)
1
2
3
4
5
6
7
8
9

back：

通过调用 history.back() 回溯历史。相当于 router.go(-1)；

forward：

通过调用 history.forward() 在历史中前进。相当于 router.go(1)；

在 vue-router3.x 的时候，router-link 有一个 tag 属性，可以决定 router-link 到底渲染成什么元素： 但是在 vue-router4.x 开始，该属性被移除了；

  • 而给我们提供了更加具有灵活性的 v-slot 的方式来定制渲染的内容；
    • v-slot 如何使用呢？
    • 首先，我们需要使用 custom 表示我们整个元素要自定义
  • 如果不写，那么自定义的内容会被包裹在一个 a 元素中；
    • 其次，我们使用 v-slot 来作用域插槽来获取内部传给我们的值：
  • href：解析后的 URL；
  • route：解析后的规范化的 route 对象；
  • navigate：触发导航的函数；
  • isActive：是否匹配的状态；
  • isExactActive：是否是精准匹配的状态；
vue
<router-link to="/about" V-slot="{ href, route, navigate,isActive,isExactActive }">
<- @click="navigate">跳转about</p>
<div>
    <p>href: {{ href }}</p>
    <p>route: {{ route }}</p>
    <p>isActive: {{ isActive}}</p>
    <p>isExactActive: {{ isExactActive }}</p>
</div>
</router-link>
1
2
3
4
5
6
7
8
9

router-view 的 v-slot

router-view 也提供给我们一个插槽，可以用于 <transition> 和 <keep-alive> 组件来包裹你的路由组件：

  • Component：要渲染的组件；
  • route：解析出的标准化路由对象；

动态路由处理

动态添加

某些情况下我们可能需要动态的来添加路由：

  • 比如根据用户不同的权限，注册不同的路由；
  • 这个时候我们可以使用一个方法 addRoute； 如果我们是为 route 添加一个 children 路由，那么可以传入对应的 name： 动态添加一个路由
javascript
const categoryRoute = {
   path:'/category',
   component: () => import ('../pages/Category.vue')
}
router.addRoute(categoryRoute)
1
2
3
4
5
javascript
const categoryRoute = {
   path:'/home',
   component: () => import ('../pages/Category.vue')
}
router.addRoute('home', homeMomentRoute)
1
2
3
4
5

动态删除路由

方式一：添加一个 name 相同的路由；

javascript
router.addRoute({ path: '/about' name: "about",component: About}
// 这将会删除之前己经添加的路由，因为他们具有相同的名字且各字必须是唯一的
router.addRoute({ path: '/other' name: "about",component: About}
1
2
3
4

方式二：通过 removeRoute 方法，传入路由的名称；

javascript
router.addRoute({ path: '/about' name: "about",component: About})
// 删除路由如果存在的话
router.removeRoute('about')
1
2
3

方式三：通过 addRoute 方法的返回值回调

javascript
const removeRoute = router.addRoute({ path: '/about' name: "about",component: About}
removeRoute()
1
2

检查路由是否存在

  • router.hasRoute()：检查路由是否存在。
  • router.getRoutes()：获取一个包含所有路由记录的数组。

Copyright © 2018-2025 Mason

沪ICP备20006251号-1