vue3 router配置有关parent报null 的错误问题

发布时间：2023-05-24 文章分类：WEB开发, 电脑百科投稿人：赵颖字号：默认 | 大 | 超大打印

今天刚解决了npm install 的问题和 vue create 构建项目的时候的问题，之后就步入正轨学习有关的路由，无奈在使用vue create 成功构建项目后使用的使用的vue-router 又报了新的问题：Uncaught TypeError: Cannot read properties of null (reading 'parent')

有关的router的js文件的书写我检查了好几遍，请教了老师就是不知道问题出现在哪里？会使得这种问题的出现，有关我的router.js 写的代码如下:

import {createApp} from 'vue'
import App from './App.vue'
import {createRouter, createWebHashHistory} from 'vue-router';
const  routes= [
    {
        path: '/',
        name: 'HelloWorld',
        component: ()=>import(/* webpackChunkName: "Page1" */'./Page1.vue'),
    }
]
const router = createRouter({
    history: createWebHashHistory(),
    //用哈希模式
    routes:  routes
});
createApp(App).use(router).mount('#app')

无奈只能用了最笨的解决方法直接使用的powerShell使用了全局的vue-cli 进行有关的项目创建没有选用在创建项目的时候就勾选router 的插件之后直接使用的vue add router 进行router的项目创建，有关生成的router 的js代码：

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
export default router

main.js 文件引入index.js 文件使用：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

就是这样可以正常的运行，对于这种方式始终有点麻烦所以我就想要不直接在idea中先创建默认的vue3的项目再使用 vue add router 进行有关的router 插件的添加，结果可以！！现在我也没找出来问题到底出在什么地方，只能说有关插件之间的问题真的很莫名奇妙，希望大家对于自己在学习新的知识的过程中能够大胆尝试自己的猜想！！

总结下最终问题的解决就是：使用vue 创建默认的项目之后再使用vue add router的方式进行router 的添加这种的操作方式可以使得上述问题得解决

标签 route, vue3, 问题