Vue项目中使用router

Vite项目中使用router的步骤：

1.安装路由器库：

 npm install vue-router@4

2.创建路由配置：通常命名为 router.js 或者 router/index.js

 import { createRouter, createWebHashHistory } from 'vue-router';
 import Login from '../views/Login.vue';
 import Index from '../views/Index.vue';
 ​
 const routes = [
     {path:'/',component: Login},
     {
         path:'/index', component: Index
         ,children: [
             {
                 path: '',
                 alias: '/list',
                 component: () => import('../components/User.vue')
             },
             {
                 path: '/upload',
                 component: () => import('../components/Avatar.vue')
             }
         ]
     }   
 ]
 ​
 // 创建路由实例
 const router = createRouter({
     routes,
     history: createWebHashHistory()
 });
 ​
 // 导出路由实例
 export default router;

3.在应用中使用路由：通常是 main.js中使用创建的路由实例

 import { createApp } from 'vue'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import elementIcon from "./plugins/icons";
 import { createPinia } from 'pinia'
 import axios from "axios"
 // import './style.css'
 import router from './router'
 import App from './App.vue'
 ​
 const pinia = createPinia()
 const app = createApp(App);
 ​
 app.use(ElementPlus);
 app.use(router);
 app.use(pinia);
 app.use(elementIcon);
 app.config.globalProperties.$axios = axios
 ​
 app.mount('#app')

4.在组件中使用路由：在模板中使用 <router-link> 来生成链接

 <template>
     <!-- 默认显示的是路由中的 / -->
     <router-view></router-view>
 </template>