vue3 router配置有关parent报null 的错误问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3 router配置有关parent报null 的错误问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

今天刚解决了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 的添加这种的操作方式可以使得上述问题得解决文章来源地址https://www.toymoban.com/news/detail-467247.html

到了这里，关于vue3 router配置有关parent报null 的错误问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！