使用vue-router出现报错: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'push')" 、 Cannot read properties of undefined (reading 'push')
router的 index.js
import Vue from 'vue'
import VueRouter from './router'
Vue.use(VueRouter)
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')
}
]
}
]
new VueRouter({
model: 'history',
routes
})
export default routes
CommonAside.vue
<template>
<el-menu
default-active="1-4-1"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
:collapse="isCollapse"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
>
<h3>通用后台管理系统h3>
<el-menu-item
v-for="item in noChildren"
:index="item.path + ''"
:key="item.path"
@click="clickMenu(item)"
>
<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>
<script>
export default {
name: 'CommonAside',
data() {
return {
isCollapse: false,
menu: [
{
path: '/',
name: 'home',
label: '首页',
icon: 's-home',
url: 'Home/Home'
},
{
path: '/user',
name: 'user',
label: '用户管理',
icon: 'user',
url: 'UserManage/UserManage'
},
{
label: '其他',
icon: 'location',
path: 'other',
children: [
{
path: '/page1',
name: 'page1',
label: '页面1',
icon: 'video-play',
url: 'Other/PageOne'
},
{
path: '/page2',
name: 'page2',
label: '页面2',
icon: 'seting',
url: 'Other/PageTwo'
}
]
}
]
}
},
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() {
return this.menu.filter((item) => !item.children)
},
hasChildren() {
return this.menu.filter((item) => item.children)
}
}
}
script>
<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;
}
}
.el-container {
height: 100vh;
}
style>
首先import VueRouter from './router'
这里没报错吗?应该是import VueRouter from 'vue-router'
吧,安装vue-router
包了吗?
打印this.$router
看有值吗
你在menu.vue 搜一下push,看看是没有取到值还是这个方法需要一个变量接收
检查一下点击路由跳转的方法
this.$router.push({name:item.name})
import VueRouter from './router' 替换成 import VueRouter from 'vue-router'
你可以参考下这篇文章:Error in v-on handler: "TypeError: Cannot read property 'value' of undefined"把Vue.use(VueRouter)放到new VueRouter()下面