1.Vue-Router的集成
在Vue.js+TypeScript项目中集成Vue-Router，具体的步骤如下。
第一步：新建页面组件
在src/views目录下分别新建main/main.vue、login/login.vue、not-found/not-found.vue三个页面组件。
main.vue组件代表首页，代码如下所示：
<script setup lang="ts"> </script><template> <div>Main</div> </template>
<style scoped> </style> login.vue组件代表首页，代码如下所示： <script setup lang="ts"> </script>
<template> <div>Login</div> </template>
<style scoped> </style> not-found.vue组件代表首页，代码如下所示： <script setup lang="ts"> </script>
<template> <div><h2>Not Found Page</h2></div> </template>
<style scoped> </style> 第二步：关闭ESLint的vue/multi-word-component-names规则检查。 当新建main.vue和login.vue组件时，由于ESLint中默认要求组件命名必须由多个单子组成。如果不是，就会提示vue/multi-word-component-names的错误。例如：Component name "main" should always be multi-word. 如果想继续使用单个单词来命名组件，那么可以修改.eslintrc文件，关闭该规则。 module.exports = { rules: { 'vue/multi-word-component-names': ['off', { ignores: [] }] } } 第三步：配置路由映射和创建路由对象。 # 使用npm命令安装 npm install vue-router 修改src/router/index.ts的路由配置文件，代码如下所示： import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router' const routes: Array<RouteRecordRaw> = [ { path: '/', name: '/login', component: () => import('@/views/login/login.vue') }, { path: '/login', name: 'login', component: () => import('@/views/login/login.vue') }, { path: '/main', name: 'main', component: () => import('@/views/main/main.vue') }, { path: '/:pathMatch(.*)*', name: 'notFound', component: () => import('@/views/not-found/not-found.vue') } ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router 可以看到，在routes数组中注册（配置）了main.vue、login.vue、not-found.vue三个页面组件，它们都用了路由懒加载技术；还注册了一个默认路由（/），当访问默认路径时，会重定向到登录页面。
翻译
搜索
复制
<iframe></iframe> 标签：web,vue,ssts,hospital,component,组件,found,login,main From： https://www.cnblogs.com/lizhigang/p/18025268