本文详细介绍了如何在Vue项目中安装Vue-Router，以及如何配置路由文件，包括动态导入组件、设置路由路径、嵌套路由和菜单结构。同时，展示了在入口文件main.js中引入和注册路由，以及在布局组件中使用<router-view>标签展示路由内容。
安装路由
使用npm install vue-router --save安装路由新建路由文件 router ->index.js
编写路由文件(index.js)
import Vue from "vue";
//引入路由插件
import Router from 'vue-router';
//在vue中注册路由插件
Vue.use(Router)
//这里使用如下引入方式
const Layout=() =>import ('@/views/layout')
const Login =()=>import ('@/views/login')
const FirstPage=()=>import ('@/views/firstPage')
const CodeCreate =()=>import('@/views/codeCreate')
const FormCreate=()=>import('@/views/formCreate')
const SystemMange=()=>import('@/views/systemMange')
const DepartmentMange=()=>import('@/views/systemMange/departmentMange')
const MenuMange=()=>import('@/views/systemMange/menuMange')
const PostMange=()=>import('@/views/systemMange/postMange')
const RoleMange=()=>import ('@/views/systemMange/roleMange')
const UserMange=()=>import ('@/views/systemMange/userMange')
const LogMange=()=>import('@/views/systemMange/logMange')
const LoginLog=()=>import('@/views/systemMange/logMange/loginLog')
const OprateLog=()=>import('@/views/systemMange/logMange/oprateLog')
const SystemMonitor=()=>import('@/views/systemMonitor')
const OnlineUser=()=>import('@/views/systemMonitor/onlineUser')
const ScheduledTask=()=>import('@/views/systemMonitor/scheduledTask')
const router=new Router({
routes:[
{
path:'/',
component:Layout,
redirect:'/firstpage',
children:[
{
path:'/firstpage',
component:FirstPage,
meta:{
name:'首页',
icon:'el-icon-s-operation'
}
},
{
path:'/systemmange',
component:SystemMange,
meta:{
name:'系统管理',
icon:'el-icon-eleme'
},
children:[
{
path:'/departmentmange',
component:DepartmentMange,
meta:{
name:'岗位管理',
icon:'el-icon-delete'
}
},
{
path:'/menumange',
component:MenuMange,
meta:{
name:'菜单管理',
icon:'el-icon-setting'
}
},
{
path:'/postmange',
component:PostMange,
meta:{
name:'部门管理',
icon:'el-icon-user'
}
},
{
path:'/rolemange',
component:RoleMange,
meta:{
name:'角色管理',
icon:'el-icon-phone-outline'
}
},
{
path:'/usermange',
component:UserMange,
meta:{
name:'用户管理',
icon:'el-icon-star-off'
}
},
{
path:'/logmange',
component:LogMange,
meta:{
name:'日志管理',
icon:'el-icon-goods'
},
children:[
{
path:'/loginlog',
component:LoginLog,
meta:{
name:'登录日志',
icon:'el-icon-warning-outline'
}
},
{
path:'/opratelog',
component:OprateLog,
meta:{
name:'操作日志',
icon:'el-icon-help'
}
}
]
}
]
},
{
path:'/codecreate',
component:CodeCreate,
meta:{
name:'代码生成',
icon:'el-icon-picture-outline-round'
}
},
{
path:'/systemmonitor',
component:SystemMonitor,
meta:{
name:'系统监控',
icon:'el-icon-camera'
},
children:[
{
path:'/onlineuser',
component:OnlineUser,
meta:{
name:'在线用户',
icon:'el-icon-video-camera'
}
},
{
path:'/scheduledtask',
component:ScheduledTask,
meta:{
name:'定时任务',
icon:'el-icon-bell'
}
}
]
},
{
path:'/formcreate',
component:FormCreate,
meta:{
name:'表单生成',
icon:'el-icon-video-pause'
}
}
]
},
{
path:'/login',
component:Login
}
]
})
export default router在vue的入口文件main.js中引入并注册路由文件
import router from './router'
new Vue({
router,
render: h => h(App),
}).$mount('#app')
在跟组件中添加<router-view>标签
<div>
<router-view></router-view>
</div>编写首页布局容器
<template>
<div>
<el-container class="container_style">
<el-aside :width="isFold?'150':''">
<el-menu
class="menu_style"
default-active="/firstpage"
background-color="#3A4E67"
:unique-opened="true"
@select="handleSelect"
:collapse="isFold"
text-color="#fff">
<div v-for="(item,index) in menu" :key="index">
<el-menu-item :index="item.path" v-if="!item.children">
<i :class="item.meta.icon"></i>
<span slot="title">{{item.meta.name}}</span>
</el-menu-item>
<el-submenu v-else :index="item.path">
<template slot="title">
<div>
<i :class="item.meta.icon"></i>
<span slot="title">{{item.meta.name}}</span>
</div>
</template>
<div v-for="(child,jex) in item.children" :key="jex">
<el-menu-item :index="child.path" v-if="!child.children">
<i :class="child.meta.icon"></i>
<span slot="title">{{child.meta.name}}</span>
</el-menu-item>
<el-submenu v-else :index="child.path">
<template slot="title">
<div>
<i :class="child.meta.icon"></i>
<span slot="title">{{child.meta.name}}</span>
</div>
</template>
<el-menu-item :index="obj.path" v-for="(obj,t) in child.children" :key="t">
<i :class="obj.meta.icon"></i>
<span slot="title">{{obj.meta.name}}</span>
</el-menu-item>
</el-submenu>
</div>
</el-submenu>
</div>
</el-menu>
</el-aside>
<el-container>
<el-header>
<div>
<el-row :gutter="20">
<el-col :span="2">
<div>
<i class="el-icon-s-fold" v-show="!isFold" @click="foldToUnfold(true)"></i>
<i class="el-icon-s-unfold" v-show="isFold" @click="foldToUnfold(false)"></i>
</div>
</el-col>
<el-col :span="20">
<div>
<el-breadcrumb separator=">">
<el-breadcrumb-item :to="{ path: '/firstpage' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: item.path }" v-for="item in breadList" :key="item.path">{{ item.meta.name }}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</el-col>
<el-col :span="2">
<div class="avatar_box">
<el-dropdown @command="handleCommand">
<span>
<el-avatar shape="square" size="medium" src="https://dingyue.ws.126.net/2020/0426/f435ddf1g00q9dj090023c000hr00hpm.gif"></el-avatar>
<i class="el-icon-caret-bottom"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="message">我的消息</el-dropdown-item>
<el-dropdown-item command="account">我的账号</el-dropdown-item>
<el-dropdown-item command="login">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-col>
</el-row>
</div>
</el-header>
<el-main>
<el-card>
<router-view></router-view>
</el-card>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import router from '@/router'
export default{
name:'layout',
data(){
return{
menu:router.options.routes[0].children,
isFold:false,
breadList:[]
}
},
created(){
},
methods:{
handleCommand(e){
console.log(e);
if(e=='login'){
this.$router.replace('/login')
}
},
handleSelect(index){
this.breadcrumbFilter(index)
this.$router.push(index)
},
foldToUnfold(flag){
this.isFold=flag
},
breadcrumbFilter(path){
let list =this.menu
let arr=[]
list.forEach((item)=>{
if(item.path==path&&!item.children){
arr.push(item)
}
if(item.children&&item.path!=path){
item.children.forEach((child)=>{
if(child.path==path&&!child.children){
arr.push(item)
arr.push(child)
}
if(child.children&&child.path!=path){
child.children.forEach((key)=>{
if(key.path==path&&!key.children){
arr.push(item)
arr.push(child)
arr.push(key)
}
})
}
})
}
})
this.breadList=arr
}
}
}
</script>
<style scoped>
/*隐藏文字*/
.el-menu--collapse .el-submenu__title span {
display: none;
}
/*隐藏 > */
.el-menu--collapse .el-submenu__title .el-submenu__icon-arrow {
display: none;
}
.el-dropdown{
color: #fff;
padding: 12px 0px 0 0;
}
/deep/ .el-breadcrumb__inner{
color:#fff !important;
}
.el-breadcrumb{
line-height: 4.3;
}
.menu_style:not(.el-menu--collapse){
width: 200px;
min-height: 400px;
}
.menu_style{
border: 0px;
}
.container_style{
width: 100vw;
height: 100vh;
}
.el-header {
background-color: #3A4E67;
color: #fff;
line-height: 60px;
}
.el-aside{
background-color: #3A4E67;
color: #fff;
line-height: 200px;
text-align: start;
}
.el-main {
background-color: #E9EEF3;
color: #333;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>补充
路由跳转的方法
<route-link to=""></route-link>
this.$router.push()
this.$router.replace()
this.$router.go()
扫一扫
4073
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
