问题

如题所示：

答案

看看路由引进的路径有没有写错，写漏，

我一开始的路径是这样的：

routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('@/views/hzhHome.vue'),
      meta: { title: '首页' }
    },
    {
      path: '/hzhAbout',
      name: 'about',
      component: () => import('@views/hzhAbout.vue'),
      meta: { title: '关于' }
    },
    {
      path: '/hzhFriend',
      name: 'friend',
      component: () => import('@views/hzhFriend.vue'),
      meta: { title: '友链' }
    },
    {
      path: '/hzhArticle',
      name: 'article',
      component: () => import('@views/hzhArticle.vue'),
      meta: { title: '文章' } 
    }
  ]

再看看文件目录结构：

后来，发现是写漏了单词末尾的s，@符号后面没有加/，修改源码如下：

routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('@/views/hzhHome.vue'),
      meta: { title: '首页' }
    },
    {
      path: '/hzhAbout',
      name: 'about',
      component: () => import('@/views/hzhAbout.vue'),
      meta: { title: '关于' }
    },
    {
      path: '/hzhFriend',
      name: 'friend',
      component: () => import('@/views/hzhFriend.vue'),
      meta: { title: '友链' }
    },
    {
      path: '/hzhArticle',
      name: 'article',
      component: () => import('@/views/hzhArticles.vue'),
      meta: { title: '文章' } 
    }
  ]