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

相关推荐
阿卡不卡几秒前
Iot 设备编号生成
前端
展程5 分钟前
重构shi山工程,却遇到全局的1000+ts问题...
前端
凌晨两点的菜鸡6 分钟前
前端部署-CICD
前端·nginx
林太白17 分钟前
NestJS-字典类型模块
前端·javascript·nestjs
林太白19 分钟前
NestJS-字典数据模块
前端·javascript·nestjs
林太白29 分钟前
Rust搜索优化
前端·后端·rust
用户38022585982437 分钟前
vue3源码解析:编译之解析器实现原理
前端·vue.js·源码阅读
Ygrowly38 分钟前
搭建 Mock 服务,实现前端自调
前端
火车叼位42 分钟前
threejs api速查表, 你的下一个鼠标垫图案素材
前端·api·three.js
铃铃六1 小时前
typescript中tpye和interface的区别
前端·typescript