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>
相关推荐
qq_456001651 小时前
在Vue3中,如何在父组件中使用v-model与子组件进行双向绑定?
前端·javascript·vue.js
sunbyte4 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
可爱的秋秋啊4 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林4 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
良艺呐^O^5 小时前
uniapp实现app自动更新
开发语言·javascript·uni-app
IT瘾君6 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库7 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端7 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED7 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪8 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试