VueRouter
前置条件
用vue cli创建Vue项目并安装ElementUI插件
https://www.cnblogs.com/aeolian/p/15828543.html
VueRouter
安装VueRouter
npm install vue-router
#安装指定版本号的vue-router
npm i vue-router@3.2.0
使用VueRouter
main.js
//引用router
import router from './router'
new Vue({
router, //使用router
render: h => h(App),
}).$mount('#app')
router/index.js
src下新建router文件夹和index.js
src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
//import Home from '../views/Home.vue'
//使用VueRouter插件
Vue.use(VueRouter)
// 创建路由对应的view
const routes = [
{
path: '/',
name: 'Home',
component: () => import('../views/Home.vue')
},
{
path: '/user',
name: 'User',
component: () => import('../views/User.vue')
}
]
// 创建VueRouter实例
const router = new VueRouter({
mode: "history",
routes
})
//main.js中引用的就是这个router
export default router
视图组件
src/views/Home.vue
<template>
<div>{{msg}}</div>
</template>
<script>
export default{
name: 'homeView', //这里要用驼峰命名法
data(){
return {
msg: 'this is Home'
}
}
}
</script>
src/views/User.vue
<template>
<div>{{msg}}</div>
</template>
<script>
export default{
name: 'userView',
data(){
return {
msg: 'this is User'
}
}
}
</script>
router-view展示数据
App.vue中添加router-view,默认展示/路由的内容
<router-view></router-view>
router-link改变router-view中内容
HelloWorld.vue
<template>
<div class="hello">
{{msg}}
<router-link to="/">
<el-button>主页</el-button>
</router-link>
<router-link to="/user">
<el-button type="primary">用户</el-button>
</router-link>
</div>
</template>
Container容器布局
安装less插件
#css预处理器less
npm i less
#解析器
npm i less-loader@5.0.0
Home.vue
<template>
<el-container style="height:100%">
<el-aside width="auto">
Aside
</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
</el-container>
</template>
<script>
export default{
name: 'homeView',
data(){
return {
msg: 'this is Home'
}
}
}
</script>
<style lang="less" scoped>
.el-aside {
background-color: rgb(184, 172, 172);
}
.el-header {
background-color: rgb(245, 233, 233);
}
.el-main {
background-color: rgb(208, 241, 185);
}
</style>
App.vue只留router-view标签
<template>
<div id="app">
<!-- 展示vue router -->
<router-view></router-view>
</div>
</template>
<script>
//import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App'
// ,components: {
// HelloWorld
// }
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
侧边栏CommonSide.vue
在src/components/CommonSide.vue
<template>
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">导航一</span>
</template>
<el-menu-item-group>
<span slot="title">分组一</span>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<span slot="title">选项4</span>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</template>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
</style>
<script>
export default {
data() {
return {
isCollapse: true
};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
在views/Home.vue中引入CommonSide组件并在Vue单页组件中使用
<template>
<el-container style="height:100%">
<el-aside width="auto">
<!-- 侧边栏aside -->
<common-aside></common-aside>
</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
</el-container>
</template>
<script>
// 引入侧边栏aside组件
import CommonAside from '../components/CommonAside.vue'
export default{
name: 'homeView',
components: {
// 在本组件中使用侧边栏组件
CommonAside
},
data(){
return {
msg: 'this is Home'
}
}
}
</script>
CommonAside侧边栏使用json数据
App.vue中把高度改为整屏
#app {
/* 一屏的高度 */
height: 100vh;
}
<template>
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
<!-- 标题 -->
<h3>后台管理系统</h3>
<!-- 无子菜单遍历 -->
<el-menu-item v-for="item in noChildren" :index="item.path" :key="item.path">
<i :class="'el-icon-'+item.icon"></i>
<span slot="title">{{item.label}}</span>
</el-menu-item>
<!-- 有子菜单遍历 -->
<el-submenu v-for="item in hasChildren" :index="item.path" :key="item.path">
<template slot="title">
<i :class="'el-icon-'+item.icon"></i>
<span slot="title">{{item.label}}</span>
</template>
<!-- 遍历子菜单 -->
<el-menu-item-group v-for="(subItem,subIndex) in item.children" :key="subItem.path">
<el-menu-item :index="subIndex">{{subItem.label}}</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</template>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
</style>
<script>
export default {
data() {
return {
isCollapse: false,
menu:[
{
path: '/',
name: 'home',
label: '首页',
icon: 's-home',
url: 'Home/Home'
},
{
path: '/mall',
name: 'mall',
label: '商品管理',
icon: 'video-play',
url: 'MallManage/MallManage'
},
{
label: '系统管理',
icon: 'setting',
children:[
{
path: '/user',
name: 'user',
label: '用户管理',
icon: 'user',
url: 'UserManage/UserManage'
},
{
path: '/role',
name: 'role',
label: '角色管理',
icon: 'role',
url: 'RoleManage/RoleManage'
},
{
path: '/menu',
name: 'menu',
label: '菜单管理',
icon: 'role',
url: 'MenuManage/MenuManage'
}
]
}
]
};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
},
computed:{
noChildren() {
// noChildren函数返回无子结点的menu
return this.menu.filter(item => !item.children)
},
hasChildren() {
// hasChildren函数返回有子结点的menu
return this.menu.filter(item => item.children)
}
}
}
</script>
效果:
点击左侧菜单右侧显示组件
在菜单上添加点击事件clickMenu
CommonAside.vue
<template>
<el-menu default-active="1-4-1" class="el-menu-vertical-demo"
background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
@open="handleOpen" @close="handleClose" :collapse="isCollapse">
<!-- 标题 -->
<h3>后台管理系统</h3>
<!-- 无子菜单遍历 -->
<el-menu-item @click="clickMenu(item)" v-for="item in noChildren" :index="item.path" :key="item.path">
<i :class="'el-icon-'+item.icon"></i>
<span slot="title">{{item.label}}</span>
</el-menu-item>
<!-- 有子菜单遍历 -->
<el-submenu v-for="item in hasChildren" :index="item.path" :key="item.path">
<template slot="title">
<i :class="'el-icon-'+item.icon"></i>
<span slot="title">{{item.label}}</span>
</template>
<!-- 遍历子菜单 -->
<el-menu-item-group v-for="(subItem,subIndex) in item.children" :key="subItem.path">
<!-- 添加clickMenu点击事件 -->
<el-menu-item @click="clickMenu(subItem)" :index="subIndex">{{subItem.label}}</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</template>
<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
.el-menu{
height: 100%;
border: none;
h3 {
color: #fff;
text-align: center;
line-height: 48px;
}
}
</style>
<script>
export default {
data() {
return {
isCollapse: false,
menu:[
{
path: '/',
name: 'home',
label: '首页',
icon: 's-home',
url: 'Home/Home'
},
{
path: '/mall',
name: 'mall',
label: '商品管理',
icon: 'video-play',
url: 'MallManage/MallManage'
},
{
label: '系统管理',
icon: 'setting',
children:[
{
path: '/user',
name: 'user',
label: '用户管理',
icon: 'user',
url: 'UserManage/UserManage'
},
{
path: '/role',
name: 'role',
label: '角色管理',
icon: 'role',
url: 'RoleManage/RoleManage'
},
{
path: '/menu',
name: 'menu',
label: '菜单管理',
icon: 'role',
url: 'MenuManage/MenuManage'
}
]
}
]
};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
// 点击菜单跳转路由
clickMenu(item){
this.$router.push({
name: item.name
});
}
},
computed:{
noChildren() {
// noChildren函数返回无子结点的menu
return this.menu.filter(item => !item.children)
},
hasChildren() {
// hasChildren函数返回有子结点的menu
return this.menu.filter(item => item.children)
}
}
}
</script>
把Home.vue改名为Main.vue,然后在views下面新建home和user文件夹,分别在下面新建index.vue。
router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
//import Home from '../views/Home.vue'
//使用VueRouter插件
Vue.use(VueRouter)
// 创建路由对应的view
const routes = [
{
path: '/',
name: 'Main',
component: () => import('../views/Main.vue'),
children:[
{
path: '/home',
name: 'home',
component: () => import('../views/home')
},
{
path: '/user',
name: 'user',
component: () => import('../views/user')
}
]
}
]
// 创建VueRouter实例
const router = new VueRouter({
mode: "history",
routes
})
//main.js中引用的就是这个router
export default router
然后Main.vue中新增
总结: 首先当路径为/时候,展示我们的默认展示页面Main.vue,然后这里注意了,这里写了一个children,说明这里面的的都是Main.vue页面的子路由,这些页面将来会展示在Main.vue页面中的router-view中,所以一个页面中的router-view是用来展示这个页面路由下面的子路由的。
如果这篇文章对你有用,可以关注本人微信公众号获取更多ヽ(^ω^)ノ ~
![微信公众号二维码](https://images.cnblogs.com/cnblogs_com/aeolian/1679458/o_wechat_gzh_qrcode.jpg)