elementui-plus+vue3+vite构建工具模板——路由配置

elementui-plue提供了 Vite 模板
clone到本地后，执行

npm i

然后安装路由

npm install vue-router

在项目中创建views文件夹，并添加一个vue文件，这里名为hello.vue，并写一些简单的模板代码
新建一个router文件，在router目录下新建index.js文件，如果不想把router路径写在这个文件下，还可以添加几个文件用来管理路径，再进行导出即可，这里先都写在index.js下，代码如下：

import {
  createRouter,
  createWebHistory
} from 'vue-router'
 
 
import Hello from '../views/hello.vue'
 
const routes = [
  {
    name: 'hello',
    path: '/hello',
    component: Hello
},
]
 
 
const router = createRouter({
  history: createWebHistory(),
  routes
})
export default router

在main.js文件下配置路由，代码如下（如果用了elemenuiPlus-vite模板直接复制即可）：

import { createApp } from "vue";
import App from "./App.vue";

// import "~/styles/element/index.scss";

// import ElementPlus from "element-plus";
// import all element css, uncommented next line
// import "element-plus/dist/index.css";

// or use cdn, uncomment cdn link in `index.html`

import "~/styles/index.scss";

// If you want to use ElMessage, import it.
import "element-plus/theme-chalk/src/message.scss"


import router from '../src/router/index.js'
 
//注意use要在mount之前
createApp(App).use(router).mount('#app')

添加 router-view，我这里是在app.vue中添加的

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

<style>
#app {
  text-align: center;
  color: var(--el-text-color-primary);
}

.element-plus-logo {
  width: 50%;
}
</style>

这样就完成了router的引入，如图：