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.成功

相关推荐
深度混淆3 分钟前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China4 分钟前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q5 分钟前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海6 分钟前
Chrome离线安装包下载
前端·chrome
endingCode9 分钟前
45.坑王驾到第九期:Mac安装typescript后tsc命令无效的问题
javascript·macos·typescript
m512716 分钟前
LinuxC语言
java·服务器·前端
运维-大白同学38 分钟前
将django+vue项目发布部署到服务器
服务器·vue.js·django
Myli_ing1 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维1 小时前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_2 小时前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript