路由使用常见问题

[TOC]

## 路由使用常见问题

### RouterLink / router-link 易错点

错误提示

```bash
Uncaught TypeError: Cannot read properties of undefined (reading 'state')
    at pushWithRedirect (vue-router.mjs:1285:19)
    at Object.push (vue-router.mjs:1257:10)
    at navigate (vue-router.mjs:932:62)
    at runtime-dom.esm-bundler.js:759:45
    at callWithErrorHandling (runtime-core.esm-bundler.js:199:19)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:206:17)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:217:19)
    at HTMLAnchorElement.invoker (runtime-dom.esm-bundler.js:730:5)

```

RouterLink / router-link 不能绑定click事件

+ RouterLink / router-link 是 Vue Router 自带的路由跳转组件
+ 它内部已经封装了跳转逻辑
+ 你再给它加 @click 手动跳转 → 两个跳转冲突
+ 导致 Router 实例状态异常 → 报 state 未定义

### 修改路由模式时页面空白

这个问题可能是路由引入不对，例如下面的代码，我们引入的是 createWebHashHistory ，而是使用的确实 createWebHistory，如果要修改模式，要注意是否引入了对应的模式，下面的错误只要 `import createWebHistory` 即可

``` js
// import { createRouter, createWebHashHistory } from 'vue-router'
import { createRouter, createWebHistory } from 'vue-router'    // 正确修改
const routes = [
    { path: '/', name: 'home', component: () => import('@components/HelloWorld.vue') },
]

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

###  $route 和 $router 在 script setup 中 undefined

$route 和 $router 只能在模板中直接使用，vue 为模板注册了 $route 和 $router 响应式，而 script setup 中是没有this的，因此 this.$route/this.$router 和直接使用 $route/$router 都会报下面的错误

```bash
TypeError: Cannot read properties of undefined (reading '$route')
```

```html
<script setup>
const name = this.$route.params.name // 报上面的错误 ……undefined ，$route 同理
const age = $route.params.age // 报上面的错误 ……undefined ，$route 同理
</script>
```

### 通过路由命名方式子路由参数不会刷新

问题代码如下

```js
const routes = [
    {
        path: '/routerNesting/:flag?', name: 'routerNesting', component: () => import('@study/routerNesting.vue'), children: [
            { path: 'routerNestingPost', name: 'routerNestingPost', component: () => import('@study/routerNestingPost.vue') }
]
```

```HTML
<router-link :to="{ name: 'routerNesting', params: { flag: '1' } }">通过路由命名访问</router-link>
<router-link :to="{ name: 'routerNestingPost' }">直接访问嵌套子路由</router-link>
<router-view />
```

问题分析：在上面代码中当先点击`通过路由命名访问`这个导航，再点击`直接访问嵌套子路由`时，params中flag还有传参数`1`，浏览器地址栏变成了`/routerNesting/1/routerNestingPost`，这是因为嵌套路由的子路由，默认会继承父路由的 params 参数，所以 flag 还在，所以这并不是bug而是vue的机制，那如果就是不希望继承父路由的 params 参数，可以使用下面几种方式

+ 想去掉 flag，最推荐：跳转子路由时写 params: {}
```html
<router-link
  :to="{
    name: 'routerNestingPost',
    params: {}  // 清空所有继承的参数
  }"
>
  直接访问嵌套子路由
</router-link>
```

+ 绝对路径 /xxx 也能避免继承
```js
children: [
  {
    path: '/routerNestingPost',  // 前面加 / → 绝对路径
    name: 'routerNestingPost'
  }
]
```

+ 不想被继承的参数，建议用 query 而不是 params
```js
// 父路由改成：
path: '/routerNesting'
// 跳转时：
{ name: 'routerNesting', query: { flag: '1' } }
```

### 组件模板template只能有一个根节点

**报错代码：**

```bash
[vue/no-multiple-template-root]
The template root requires exactly one element.eslint-plugin-vue
```

这个错误提示是 Vue.js 结合 ESLint 插件（eslint-plugin-vue）报出的，非常常见

**错误含义**

Vue 2 中，每个 .vue 单文件组件的 `<template>` 根节点有且只能有一个元素。
简单说：你的 `<template>` 里写了多个并列的根元素

```HTML
<template>
  <h1>标题</h1>
  <p>内容</p>   
</template>
```

> Tips：
+ Vue 2 的组件实例在渲染时，需要一个唯一的根 DOM 节点来挂载。多个并列节点会导致不知道把组件挂载到哪个节点上
+ Vue 3 是支持多节点的