Router路由

多级路由

在Vue路由生态里，支持配置二级、三级、四级等多级路由，理论上没有上限，实际业务中用到的级数通常是三级到四级

比如你做一个美食类网站，打算在 “中餐” 大分类下配置一个 “饺子” 栏目，那么地址就是：

1

https://chengpeiquan.com/chinese-food/dumplings

这种情况下，中餐 chinese-food 就是一级路由，饺子 dumplings 就是二级路由。

如果你想再细化一下，“饺子” 下面再增加一个 “韭菜” 、“白菜” 等不同馅料的子分类：

1

https://chengpeiquan.com/chinese-food/dumplings/chives

这里的韭菜 chives``dumplings

这是一个简单的子路由示范：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

const routes: Array<RouteRecordRaw> = [
  // 注意：这里是一级路由
  {
    path: '/lv1',
    name: 'lv1',
    component: () => import(/* webpackChunkName: "lv1" */ '@views/lv1.vue'),
    // 注意：这里是二级路由
    children: [
      {
        path: 'lv2',
        name: 'lv2',
        component: () => import(/* webpackChunkName: "lv2" */ '@views/lv2.vue'),
        // 注意：这里是三级路由
        children: [
          {
            path: 'lv3',
            name: 'lv3',
            component: () => import(/* webpackChunkName: "lv3" */ '@views/lv3.vue')
          }
        ]
      }
    ]
  }
];

最终线上的访问地址，比如要访问三级路由：

1

https://chengpeiquan.com/lv1/lv2/lv3

使用 route 获取路由信息

和 2.x 可以直接在组件里使用 this.$route 来获取当前路由信息不同，在3.x 的组件里，Vue实例既没有了 this，也没有了 $route。

要牢记一个事情就是，3.x 用啥都要导入，所以，获取当前路由信息的正确用法是：

1、导入路由组件

1

import { useRoute } from 'vue-router'

2、定义路由变量

刚刚导入的 useRoute 是一个函数，需要在 setup 里定义一个变量来获取路由信息。

1

const route = useRoute();

3、读取路由信息

接下来就可以通过定义好的变量 route 去获取当前路由信息了。

当然，如果要在 template 里使用路由，记得把 route 在 setup 里return出去。

1
2
3
4
5

// 获取路由名称
console.log(route.name);

// 获取路由参数
console.log(route.params.id);

WARNING

但是 3.x 的新路由也有一些小变化，有一些属性是被移除了，比如之前获取父级路由信息，很喜欢用的 parent 属性，现在已经没有了 点击查看原因

类似被移除的 parent ，如果要获取父级路由信息（比如你在做面包屑功能的时候），可以改成下面这样，手动指定倒数第二个为父级信息：

1
2
3
4
5
6
7
8

// 获取路由记录
const MATCHED = route.matched;

// 获取该记录的路由个数
const LEN = MATCHED.length;

// 获取倒数第二个路由（也就是当前路由的父级路由）
const ROUTE_PARENT = MATCHED[LEN - 2];

如果有配置父级路由，那么刚刚的 ROUTE_PARENT 就是父级路由信息了

使用-router-操作路由-new

和 route 一样，在 3.x 也不再存在 this.$router ，也必须通过导入路由组件来使用。

1、导入路由组件

1

import { useRouter } from 'vue-router'

2、定义路由变量

和 useRoute 一样， useRouter 也是一个函数，需要在 setup 里定义一个变量来获取路由信息。

1

const router = useRouter();

3、操作路由

接下来就可以通过定义好的变量 router 去操作路由了。

1
2
3
4
5
6
7

// 跳转首页
router.push({
  name: 'home'
})

// 返回上一页
router.back();

使用 router-link 标签跳转

router-link 是一个路由组件，可直接在 template 里使用，基础的用法在 2.x 和 3.x 一样。

默认会被转换为一个 a 标签，对比写死的 <a href="..."> ，使用 router-link 会更加灵活。

基础跳转

最基础的用法就是把它当成一个 target="_self" 的a标签使用，但无需重新刷新页面，因为是路由跳转，它的体验和使用 router 去进行路由导航的效果完全一样。

1
2
3

<template>
  <router-link to="/home">首页</router-link>
</template>

等价于 router 的 push：

1
2
3

router.push({
  name: 'home'
})

你可以写个 span 然后绑定 click 事件来达到 router-link 的效果（但你看是不是麻烦很多emm…

1
2
3
4
5
6
7
8
9
10

<template>
  <span
    class="link"
    @click="router.push({
      name: 'home'
    })"
  >
    首页
  </span>
</template>

带参数的跳转

使用 router 的时候，可以轻松的带上参数去那些有id的内容页、用户资料页、栏目列表页等等。

比如你要访问一篇文章 https://chengpeiquan.com/article/123 ，用 push 的写法是：

1
2
3
4
5
6

router.push({
  name: 'article',
  params: {
    id: 123
  }
})

同理，从基础跳转的写法，很容易就能get到在 router-link 里应该怎么写：

1
2
3
4
5
6
7
8
9
10
11
12
13

<template>
  <router-link
    class="link"
    :to="{
      name: 'article',
      params: {
        id: 123
      }
    }"
  >
    这是文章的标题
  </router-link>
</template>

不生成 a 标签

router-link 默认是被转换为一个 a 标签，但根据业务场景，你也可以把它指定为生成其他标签，比如 span 、 div 、 li 等等，这些标签因为不具备 href 属性，所以在跳转时都是通过 click 事件去执行。

在 2.x，指定为其他标签只需要一个 tag 属性即可：

1
2
3

<template>
  <router-link tag="span" to="/home">首页</router-link>
</template>

但在 3.x ，tag 属性已被移除，需要通过 custom 和 v-slot 的配合来渲染为其他标签。

比如要渲染为一个带有路由导航功能的 div：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<template>
  <router-link
    to="/home"
    custom
    v-slot="{ navigate }"
  >
    <span
      class="link"
      @click="navigate"
    >
      首页
    </span>
  </router-link>
</template>

渲染后就是一个普通的 span 标签，当你点击的时候，它会通过路由的导航把你带到指定的路由页：

1

<span class="link">首页</span>

关于这2个属性，他们的参数说明如下：

1. custom ，一个布尔值，用于控制是否需要渲染为 a 标签，当不包含 custom 或者把 custom 设置为 false 时，则依然使用 a 标签渲染。
2. v-slot 是一个对象，用来决定标签的行为，它包含了：

一般来说，v-slot 必备的只有 navigate ，用来绑定元素的点击事件，否则元素点击后不会有任何反应，其他的可以根据实际需求来添加。

TIP

要渲染为非 a 标签，切记两个点：

1. router-link 必须带上 custom 和 v-slot 属性
2. 最终要渲染的标签，写在 router-link 里，包括对应的 className 和点击事件