VUE:router路由使用

1.安装

复制代码
pnpm add vue-router@4

2.在main.js中导入

复制代码
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router' //1导入路由
const app = createApp(App)

app.use(ElementPlus)
app.use(router) //2.应用到app
app.mount('#app') //挂载

3.创建layout路由布局文件

复制代码
import { createRouter, createWebHistory } from 'vue-router'

//导入组件
import LoginVue from '@/views/Login.vue'
import LayoutVue from '@/views/Layout.vue'


//定义路由关系
const routes = [
    { path: '/login', component: LoginVue },
    {
        path: '/', component: LayoutVue,redirect:'/article/manage', children: [
           //子路由配置区
        {path: 路径 ,component: 导入的子组件名称}
        ]
    }
]

//创建路由器
const router = createRouter({
    history: createWebHistory(),
    routes: routes
})

//导出路由
export default router

4.在APP.vue中使用路由进行渲染

复制代码
<script setup>
  
</script>

<template>
  <router-view></router-view> //渲染路由的关键标签
</template>

<style scoped>

</style>

5.成功

相关推荐
Rysxt_5 小时前
Electron 与 uni-app 区别教程:如何选择适合你的跨平台开发框架?
javascript·electron·uni-app·跨平台
似水流年QC5 小时前
Electron 实战|Vue 桌面端开发从入门到上线
vue.js·electron·桌面端
前端架构师-老李5 小时前
15、Electron专题:使用 electron-store 进行本地数据存储
前端·javascript·electron
小白学大数据5 小时前
双管齐下:结合显式等待与Timeout处理复杂Ajax网页
前端·javascript·ajax
Rysxt_5 小时前
Electron 教程:从背景到 Vue3 桌面应用开发
前端·javascript·electron
luckyPian5 小时前
前端+AI:CSS3(二)
前端·css·css3
JiKun5 小时前
一键配置 Web 前端开发环境(PowerShell 自动化脚本)
前端·windows·程序员
合作小小程序员小小店5 小时前
web网页开发,在线%考试,教资,题库%系统demo,基于vue,html,css,python,flask,随机分配,多角色,前后端分离,mysql数据库
前端·vue.js·后端·前端框架·flask
慧一居士5 小时前
ES6(ECMAScript 2015)功能介绍,使用场景,对应功能点完整使用示例
前端
吃饺子不吃馅6 小时前
了解微前端:为何 Web Component 是绕不开的关键技术?
前端·javascript·架构