vue3项目，vite+vue3+ts+pinia(3)-路由router

vue3 有三种写法：
1.compostion API ： 还是按照vue2.0写法
2.组合式API:
3. 组合式API 语法糖（setup), 语法简洁（推荐使用这个）
写法：
4. 在.eslintrc.cjs 或者 .eslintrc.js中配置代码，是这个四个方法不用eslint检查，可以直接使用

globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  },

现在正式准备开发了：
5. vue中跳转页面需要路由， 终端： npm install vue-router@4

6. 在src文件中， 新两个文件：router 和 views

src => views => home => indexName.vue（文件中）

<template>
  <div>
    首页
  </div>
</template>

src => views => login => indexName.vue（文件中）

<template>
  <div>登录</div>
</template>

src => router => index.ts（文件中）

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw [] = [
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/login/indexName.vue')
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('../views/home/index.vue')
  }
]

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

export default router

还需要将路由导入vue 中，在main.ts 文件中

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import router from './router/index'

createApp(App)
  .use(router)
  .mount('#app')

将路由渲染入口挂载在 App.vue 文件中，

<template>
  <router-view />
</template>

运行代码: npm run dev , 注意哦： 浏览器url地址加上"/login"， http://127.0.0.1:0000/#/login

运行之后发现, 如果是 文件是index.vue 会有这个错误

翻译过来的意思就是组件名要以多个单词组件(驼峰命名),如indexName
解决方法
在 .eslintrc.cjs 文件里面,如果没有新建一个(注意前面加点)

"rules": {
        //关闭组件命名规则
         "vue/multi-word-component-names": "off",
        // 添加组件命名忽略规则
        // "vue/multi-word-component-names": ["error", {
        //     "ignores": ["index", "main"]//需要忽略的组件名
        // }]
    },

保存之后,再运行