配置路由系统

1. 修改路由配置文件

1.1 切换默认的路由模式

脚手架初始化的项目默认使用的路由模式是:createWebHistory,我们切换为createWebHashHistory

import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
  	// ...其他默认配置
  ]
})

1.2 创建404页面

NotFoundView.vue

<template>
  <div class="notfound-container">
    <div class="header">
      <van-nav-bar left-arrow left-text="返回" @click-left="$router.go(-1)" />
    </div>
    <div class="content">
      <van-empty image="error" description="404 暂无该页面~" />
    </div>
  </div>
</template>

1.3配置404页面的路由展示

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import NotFound from '../views/NotFoundView.vue'

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    // ...
    // 参考vue-router4.0官网
    { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
  ]
})

2. 解决引入vue组件ts报错

env.d.ts中加入如下代码

declare module "*.vue" {
  import { DefineComponent } from "vue"
  const component: DefineComponent<{}, {}, any>
  export default component
}