vue-router的问题,不能渲染我的组件,而且没有错误[已解决] 。

在使用vue-router时遇到了问题,我的组件没有渲染,控制台也没有显示错误,请按照我的代码操作。

路由器配置 (routerindex.js):

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/pages/Home/Home.vue'
import NewUser from '@/pages/NewUser/NewUser.vue'

Vue.use(VueRouter)

const routes = [
    { path: '/', component: Home.default },
    { path: '/NewUser', component: NewUser.default }
]

export default new VueRouter({
    routes
})

main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

import 'primevue/resources/themes/nova-light/theme.css'
import 'primevue/resources/primevue.min.css'
import 'primeicons/primeicons.css'
import 'primeflex/primeflex.css'

import Vuelidate from 'vuelidate'
import Card from 'primevue/card'
import InputMask from 'primevue/inputmask'
import Button from 'primevue/button'
import Sidebar from 'primevue/sidebar'
import InputText from 'primevue/inputtext';
import Message from 'primevue/message';

Vue.config.productionTip = false


Vue.use(Vuelidate)
Vue.component('Card', Card)
Vue.component('InputMask', InputMask)
Vue.component('Button', Button)
Vue.component('Sidebar', Sidebar)
Vue.component('InputText', InputText)
Vue.component('Message', Message)

new Vue({
    router: router,
    render: h => h(App),
}).$mount('#app')

app.vue:

<template>
  <Fragment id="app">
      <Header />
          <router-view />
      <Footer />
  </Fragment>
</template>

<script src="./App.js"></script>
<style src="./App.css"></style>

我的router-links在header组件中,按照github仓库中的projetc:

https:/github.comjuniorjrjlweblib-front。

谢谢

[编辑]

链接删除e,因为我解决了部分问题,最后得到错误信息。

[编辑]

我删除了一个链接,因为不产生错误的链接,我终于得到错误信息后,删除’.default’在我的路由。

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in nextTick: 
"NotFoundError: Failed to execute 'insertBefore' on 'Node': The node 
before which the new node is to be inserted is not a child of this 
node."

vue.runtime.esm.js?2b0e:1888 DOMException: Failed to execute 
'insertBefore' on 'Node': The node before which the new node is to be 
inserted is not a child of this node.
at HTMLBodyElement.n.insertBefore (webpack- 
internal:///./node_modules/vue-fragment/dist/vue- 
fragment.esm.js:5:1609)
at HTMLDivElement.e.insertBefore (webpack- 
internal:///./node_modules/vue-fragment/dist/vue- 
fragment.esm.js:5:1293)
at Object.insertBefore (webpack- 
internal:///./node_modules/vue/dist/vue.runtime.esm.js:5699:14)
at insert (webpack- 
internal:///./node_modules/vue/dist/vue.runtime.esm.js:6029:19)
at createComponent (webpack- 
internal:///./node_modules/vue/dist/vue.runtime.esm.js:5976:9)
at createElm (webpack- 
internal:///./node_modules/vue/dist/vue.runtime.esm.js:5915:9)
at updateChildren (webpack- 
internal:///./node_modules/vue/dist/vue.runtime.esm.js:6206:11)
at patchVnode (webpack- 
internal:///./node_modules/vue/dist/vue.runtime.esm.js:6309:29)
at VueComponent.patch [as __patch__] (webpack- 
internal:///./node_modules/vue/dist/vue.runtime.esm.js:6472:9)
at VueComponent.Vue._update (webpack- 
internal:///./node_modules/vue/dist/vue.runtime.esm.js:3942:19)

解决方案:

如果你需要有一个后备路由,当路径不匹配任何组件,然后这样做。

const Foo = { template: "<div>foo</div>" };
const Bar = { template: "<div>bar</div>" };
const NotFound = { template: "<div>Page not found</div>" };

Vue.config.productionTip = false;

Vue.use(VueRouter);

const routes = [
  { path: "/NewUser", component: Bar },
  { path: "/", component: Foo },
  { path: "*", component: NotFound }
];

附上工作实现。

Edit eager-borg-gbj7r

如果你想创建嵌套的 router-views 然后在这里阅读。https:/router.vuejs.orgguideessentialsnamed-views.html#nested-named-views。

给TA打赏
共{{data.count}}人
人已打赏
未分类

如何在Electron使用jQuery?

2022-9-9 5:19:18

未分类

R data.table 删除以"_nd "结尾的列。

2022-9-9 5:19:20

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索