RouterView在vue项目中无法运行

Question

我正在开发一个 vue 项目。我有一个主页，上面有一个

sideBar

组件和

routerView

组件。

看起来像这样

单击侧边栏的任何项目时，路由器会推送到

Home.vue

中的 navigateToRoute() fn 中定义的该页面的相应路径。但组件不是通过

router-view

渲染的，因此当发生重定向时，左侧的侧边栏就会消失。其他菜单项也会发生类似的情况

下面是

Home.vue

和

router/index.js

的代码（其中定义了路由）。

Home.vue

<template>
  <div class="landing-page">
     <categoryPage v-if="menuItemRendered === 'category'" />

    <sidebar @menuItemSelected="navigateToRoute"/>


    <RouterView />

  </div>
</template>

<script>
 /* eslint-disable */

/* File imports */

import sidebar from "@/components/sidebar.vue";
import categoryPage from "@/pages/category-page.vue";


/* Util imports */
import { getCompany } from "@/helper/utils";


import { RouterView } from "vue-router";

export default {
  name: "LandingPage",
  components: {
    
    sidebar,
    
  },
  data() {
    return {
      applications_list: [],
      all_applications: [],
      pageLoading: false,
      menuItemRendered: 'category',
    };
  },
  mounted() {
    this.fetchApplications();
    //console.log(MainService.getDepartments());
  },
  methods: {
    
    handleMenuItemSelected(menuItem) {
      console.log("Selected Menu Item: ", menuItem);
      this.menuItemRendered = menuItem;
    },
    navigateToRoute(menuItem) {
      console.log("Selected Menu Item: ", menuItem);
      switch(menuItem) {
        case 'category':
          this.$router.push(`${getCompany()}/category`);
          break;
        case 'subCategory':
          this.$router.push(`${getCompany()}/subCategory`);
          break;
        case 'product':
          this.$router.push(`${getCompany()}/product`);
          break;
        case 'vendor':
          this.$router.push(`${getCompany()}/vendor`);
          break;
        case 'vendorHoliday':
          this.$router.push(`${getCompany()}/vendorHoliday`);
          break;
        case 'brand':
          this.$router.push(`${getCompany()}/brand`);
          break;
        case 'tags':
          this.$router.push(`${getCompany()}/tags`);
          break;
        case 'productTagMapping':
          this.$router.push(`${getCompany()}/productTagMapping`);
          break;
        case 'fvStickers':
          this.$router.push(`${getCompany()}/fvStickers`);
          break;
        case 'productStickers':
          this.$router.push(`${getCompany()}/productStickers`);
          break;
        default:
          this.$router.push(`${getCompany()}/`)
      }
    }
  },
};
</script>

路由器/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue';

import CategoryPage  from '../pages/category-page.vue';
import subCategory from "@/pages/subCategory.vue";
import product from "@/pages/product.vue";
import vendor from "@/pages/vendor.vue";
import vendorHoliday from "@/pages/vendorHoliday.vue";
import brand from "@/pages/brand.vue";
import tags from "@/pages/tags.vue";
import productTagMapping from "@/pages/productTagMapping.vue";
import fvStickers from "@/pages/fvStickers.vue";
import productStickers from "@/pages/productStickers.vue";


import { routeGuard } from './guard';
Vue.use(VueRouter)

const routes = [
  {
    path: '/company/:company_id/',
    name: 'Home',
    beforeEnter: routeGuard,
    component: Home
  },

  //sideBar Page routes,
  {
    path: '/company/:company_id/category',
    name: 'category-page',
    component: CategoryPage,
  },
  {
    path: '/company/:company_id/subCategory',
    name: 'subCategory',
    component: subCategory,
  },
  {
    path: '/company/:company_id/product',
    name: 'product-page',
    component: product,
  },
  {
    path: '/company/:company_id/vendor',
    name: 'vendor-page',
    component: vendor,
  },
  {
    path: '/company/:company_id/vendorHoliday',
    name: 'vendor-holiday-page',
    component: vendorHoliday,
  },
  {
    path: '/company/:company_id/brand',
    name: 'brand-page',
    component: brand,
  },
  {
    path: '/company/:company_id/tags',
    name: 'tags-page',
    component: tags,
  },
  {
    path: '/company/:company_id/productTagMapping',
    name: 'product-tag-mapping-page',
    component: productTagMapping,
  },
  {
    path: '/company/:company_id/fvStickers',
    name: 'fvStickers',
    component: fvStickers,
  },
  {
    path: '/company/:company_id/productStickers',
    name: 'product-stickers',
    component: productStickers,
  },



]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

我可能认为我定义路线的方式存在一些问题，但不确定。

我已经尝试过这些，但不工作

• 即使已连接也无法工作
• 路由器视图内容未渲染

编辑 1：添加了 Vue devtool 图像

在访问主页时，我在 vue 开发工具中得到了这个

Answer 1

App.vue 中有一个 router-view 组件，它是所有路由的根 router-view。这意味着除非您另外指定，否则您的路线，

/company/:company_id/

，

/company/:company_id/subCategory

等都会加载到此路由器视图中。

对于嵌套路由（另一个路由器视图内的路由器视图），您需要使用

children

路由属性：

const routes = [
  {
    path: '/company/:company_id/',
    name: 'Home',
    beforeEnter: routeGuard,
    component: Home,
    //sideBar Page routes
    children: [
      {
        path: 'category',
        name: 'category-page',
        component: CategoryPage,
      },
      {
        path: 'subCategory',
        name: 'subCategory',
        component: subCategory,
      },
      ...
    ]
  },