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>
相关推荐
Domain-zhuo4 分钟前
Git常用命令
前端·git·gitee·github·gitea·gitcode
菜根Sec34 分钟前
XSS跨站脚本攻击漏洞练习
前端·xss
web1508541593537 分钟前
vue 集成 webrtc-streamer 播放视频流 - 解决阿里云内外网访问视频流问题
vue.js·阿里云·webrtc
m0_7482571841 分钟前
Spring Boot FileUpLoad and Interceptor(文件上传和拦截器,Web入门知识)
前端·spring boot·后端
桃园码工1 小时前
15_HTML5 表单属性 --[HTML5 API 学习之旅]
前端·html5·表单属性
百万蹄蹄向前冲2 小时前
2024不一样的VUE3期末考查
前端·javascript·程序员
轻口味2 小时前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos
alikami2 小时前
【若依】用 post 请求传 json 格式的数据下载文件
前端·javascript·json
wakangda3 小时前
React Native 集成原生Android功能
javascript·react native·react.js
吃杠碰小鸡3 小时前
lodash常用函数
前端·javascript