Vue踩坑之vue-router挂载页面失败

问题描述

系统: macOS Catalina 10.15.4
背景: 设计嵌套路由
问题: vue-router挂载页面失败

  这是本人遇到的情况,仅供参考~
  Tips:可直接看问题解决~


问题解决

  设计嵌套路由,发现挂载不上页面。如下解决方案:

App.vue

  检查App.vue文件中是否有标签,若无,添加上。

<template>
  <div id="app">
    <a-button>按钮</a-button>
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view />
  </div>
</template>

<style lang="less"></style>

router.js

  检查路由文件中import路径是否正确。

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";

Vue.use(Router);

export default new Router({
     
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
     
      path: "/user",
      //component: RenderRouterView,
      component: {
      render: h => h("router-view") },
      children: [
        {
     
          path: "/user/login",
          name: "login",
          component: () =>
            import(/* webpackChunkName: "user" */ "./views/User/Login.vue")
        },
        {
     
          path: "/user/register",
          name: "register",
          component: () =>
            import(/* webpackChunkName: "user" */ "./views/User/Register.vue")
        }
      ]
    },
    {
     
      path: "/",
      name: "home",
      component: Home
    },
    {
     
      path: "/about",
      name: "about",
      component: () =>
        import(/* webpackChunkName: "about" */ "./views/About.vue")
    }
  ]
});


如果以上依旧挂载失败

  以上两个问题解决之后,页面刷新依旧挂载失败。通过Chrome插件vue-devtools检查发现初始界面About能成功挂载,而嵌套的loginregister挂载失败,也就是说router-view未显示。
Vue踩坑之vue-router挂载页面失败_第1张图片

  检查多次代码之后确认无误,只剩最后一个办法了,重启大法~

$ npm run serve

  比较幸运的是,重启之后页面挂载成功~
Vue踩坑之vue-router挂载页面失败_第2张图片


参考链接

https://router.vuejs.org/zh/guide/essentials/nested-routes.html
https://time.geekbang.org/course/detail/100024601-91010



如果有错误或者不严谨的地方,请务必给予指正,十分感谢。
本人blog:http://breadhunter.gitee.io

你可能感兴趣的:(Vue,Vue踩坑,chrome,vue,vue.js,javascript,macos)