Question

在 laravel 8/vuejs 2 应用程序中，我遇到了主页打开的问题，点击vuejs链接被点击页面的内容在浏览器上没有显示：

在资源/js/app.js：

import Vue from 'vue';

import VueRouter from "vue-router";
import {routes} from './routes';
import common from "./common";

import {BootstrapVue, IconsPlugin} from "bootstrap-vue";
import mainapp from './components/MainApp.vue';

Vue.use(VueRouter);
Vue.mixin(common);
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);

const NODE_ENV = "dev";

var origin = window.location.origin;

export const bus = new Vue();

console.log('routes::')  // I see valid list of my routes in resources/js/routes.js
console.log(routes)

const router = new VueRouter({
    routes,
    mode : 'history'
})

console.log('router::')
console.log(router)


const app = new Vue({
    el: "#wrapper",
    router,
    mixins: [common],
    components: {
        mainapp
    },

});


router.afterEach(( to, from ) => {
    bus.$emit('page_changed', from, to);
});

还有 resources/js/routes.js:

import HomePage from "./components/Home.vue";
import ProjectsByCategoryPage from "./components/ProjectsByCategory.vue";


export const routes=[
    {
        path: "/",
        name: "home",
        component: HomePage,
        meta: { title: "Home | " }
    },

    {
        path: '/projects_by_category/:slug',
        component: ProjectsByCategoryPage,
        name: 'projectsByCategory',
        meta: { requiresLogin: false, title: "Projects By Category  | " }
    },

]

在 resources/js/components/MainApp.vue 中：

<template>
  <div>
    <h1>resources/js/components/MainApp.vue</h1>

    <router-view></router-view>

  </div>

</template>

<script>

import {bus} from '../app'; // resources/js/app.js


export default {
  name: 'main-app',

  created() {
  },
  mounted() {
  },

  methods: {

  }, // methods: {


}


</script>

和 resources/js/components/ProjectsByCategory.vue:

   <template>
     <div>

       <!-- Titlebar -->
       <div class="single-page-header">
         <div class="container">

         resources/js/components/ProjectsByCategory.vue

         </div>
       </div>

     </div>
   </template>

   <script>

   export default {
     name: "ProjectsByCategory",
     components: {
       Header,
       Footer,
     },
     data() {
       return {
       ...
       };
     },
     created() {
       console.log('ProjectsByCategory this.$route::')
       console.log(this.$route) // In the console I see this route output

       document.title = this.$route.meta.title;
     },
   };
   </script>

当我点击projectsByCategory链接时的结果在控制台中我看到创建的事件路由输出，但该页面的内容没有被替换代替

<router-view></router-view>

文件资源/js/components/MainApp.vue ?

我错过了什么？

"axios": "^0.21",
"bootstrap": "^4.6.0",
"laravel-mix": "^6.0.25",
"lodash": "^4.17.19",
"popper.js": "^1.12",
"postcss": "^8.3.1",
"sass": "^1.20.1",
"sass-loader": "^8.0.0",
"vue": "^2.6.12",
"vue-loader": "^15.9.5",
"vue-router": "^3.4.9",

添加： 我在 ProjectsByCategory.vue 文件中添加了挂载事件：

  created() {
    console.log('ProjectsByCategory created this.$route::')
    console.log(this.$route) // I SEE THIS MESSGAE
  },

  mounted() {
    console.log('ProjectsByCategory mounted this.$route::')  // I DO NOT SEE THIS MESSGAE
  },

为什么会这样？

添加了 2 个： 我在 Chrome 中调试。我尝试在 Firefox 中运行并发现下一个错误：

[Vue warn]: Error in nextTick: "NotFoundError: Node.insertBefore: Child to insert before is not a child of this node" app.js:121612:15
DOMException: Node.insertBefore: Child to insert before is not a child of this node

任何提示如何修复它？

为什么通过 vuejs 链接页面的内容没有显示在浏览器上？

0 个答案: