Vue Router拼接$route.name时TypeScript类型错误的解决问询

一、让TypeScript识别$route.name为字符串的方法 #

1. 模板内直接类型断言 #

在模板中通过类型断言明确告知TypeScript $route.name 为字符串，直接跳过类型检查报错：

<RouterLink
  v-if="!userState.signedIn"
  :to="'/signin/' + ($route.name as string)"
>Sign in</RouterLink>

只要你的路由配置里name字段全用字符串定义，这种写法完全可行。

2. 计算属性处理（更规范的TS写法） #

在脚本中定义计算属性，先完成类型断言再传递给模板，可读性和维护性更强：

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
// 断言路由名称为字符串类型
const currentRouteName = computed(() => route.name as string)
</script>

<template>
  <RouterLink
    v-if="!userState.signedIn"
    :to="'/signin/' + currentRouteName"
  >Sign in</RouterLink>
</template>

二、$route.name何时为symbol类型 #

Vue Router允许开发者用symbol作为路由的name属性，核心目的是在大型多模块项目中避免路由名称冲突（symbol具备唯一性，不会重复）。但绝大多数常规项目里，我们都会统一用字符串定义路由name，只要你没有主动在路由配置中使用symbol设置name，$route.name就只会是字符串类型。

如果真遇到$route.name为symbol的场景，String($route.name)会将其转换为类似Symbol(route-name)的字符串，这大概率不符合跳转路径的需求，因此建议尽量统一用字符串作为路由name。

三、更可靠的跳转回原页面方案 #

比起拼接路由name，更推荐传递当前页面的完整路径给登录页，适配动态路由、带参数路由等所有场景，登录后能精准跳转回原页面：

<RouterLink
  v-if="!userState.signedIn"
  :to="{ name: 'signin', query: { redirect: $route.fullPath } }"
>Sign in</RouterLink>

登录页认证完成后，直接读取$route.query.redirect参数执行跳转即可。

内容的提问来源于stack exchange，提问作者Steve Marooni