[vue-router] TypeError: Cannot read property 'app' of undefined

1.当我从子路由页面返回到一级路由页面时报错
2.浏览器控制台报错如下

Uncaught (in promise) Error: [vue-router] TypeError: Cannot read property 'app' of undefined

3.我的代码地址
https://github.com/libp/littl...
4.点击路由能实现正常调整,页面显示也是正常的,就是控制台报错
5.app.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="scss" rel="stylesheet/scss">
  @import './style/common.scss';
  .main {
    background: #ededed;;
  }
</style>

6.点击文章列表或推荐内容时就报错

<el-submenu index="2">
            <template slot="title"><i class="el-icon-document"></i>文章管理</template>
            <el-menu-item index="articleList">文章列表</el-menu-item>
            <el-menu-item index="recommendList">推荐内容</el-menu-item>
          </el-submenu>

7.route.js如下

import Vue from 'vue'
import Router from 'vue-router'
const Index = () => import('/page/index.vue')
const Home = () => import('/page/Home/home.vue')
const Random = () => import('/page/Home/random.vue')
const About = () => import('/page/Home/about.vue')
const Num = () => import('/page/Home/num.vue')

const Nav = () => import('/page/ProgrammerNav/Nav.vue')
const Admin = () => import('/page/Admin/index.vue')
const Adminhome = () => import('/page/Admin/home.vue')
const ArticleList = () => import('/page/Admin/articlelist.vue')
const RecommendList = () => import('/page/Admin/recommendList.vue')

Vue.use(Router)

const scrollBehavior = function (to, from, savedPosition) {
  if (savedPosition) {
    // savedPosition is only available for popstate navigations.
    return savedPosition
  } else {
    const position = {}

    // scroll to anchor by returning the selector
    if (to.hash) {
      position.selector = to.hash

      // specify offset of the element
      if (to.hash === '.title') {
        position.offset = { y: 100 }
      }

      if (document.querySelector(to.hash)) {
        return position
      }

      // if the returned position is falsy or an empty object,
      // will retain current scroll position.
      return false
    }

    return new Promise(resolve => {
      // check if any matched route config has meta that requires scrolling to top
      if (to.matched.some(m => m.meta.scrollToTop)) {
        // coords will be used if no selector is provided,
        // or if the selector didn't match any element.
        position.x = 0
        position.y = 0
      }

      // wait for the out transition to complete (if necessary)
      this.app.$root.$once('triggerScroll', () => {
        // if the resolved position is falsy or an empty object,
        // will retain current scroll position.
        resolve(position)
      })
    })
  }
}

export default new Router({
  mode: 'history',
  scrollBehavior,
  routes: [
    {
      path: '/',
      component: Index,
      name: 'index',
      redirect: '/home',
      children: [
        {path: 'home', component: Home},
        {path: 'random', component: Random, meta: { scrollToTop: true }},
        {path: 'about', component: About, meta: { scrollToTop: true }},
        {path: 'num/:id', name: 'num', component: Num, meta: { scrollToTop: true }}
      ]
    },
    {
      path: '/nav',
      component: Nav
    },
    {
      path: '/dasheng',
      component: Admin,
      children: [
        {path: '/', component: Adminhome},
        {path: '/articleList', component: ArticleList, meta: ['文章管理', '文章列表']},
        {path: '/recommendList', component: RecommendList, meta: ['文章管理', '文章列表']}
      ]
    }
    // {
    //   path: '*',
    //   redirect: '/home'
    // }
  ]
})
阅读 3.7k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题