V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Newyorkcity
V2EX  ›  问与答

NMD,为什么?超级简单的一个 vue 项目,<router-link>就是渲染不了

  •  
  •   Newyorkcity · 2020-01-08 21:12:55 +08:00 · 2890 次点击
    这是一个创建于 1596 天前的主题,其中的信息可能已经有所发展或是发生改变。

    代码仓库直接扔上来了

    https://gitee.com/XaiverSun/adminpage

    就是通过默认的 vuecli 生成的项目,在main.js

    import VueRouter from 'vue-router';
    Vue.use(VueRouter);
    

    App.vue中引入sidebar.vue组件

    <template>
        <div id="app">
            <sidebar></sidebar>
        </div>
    </template>
    
    <script>
        import sidebar from "./components/sidebar";
    
        export default {
            name: "app",
            components: {
                sidebar,
            }
        }
    </script>
    

    sidebar 中的内容已经简化

    <template>
        <div id="sidebar-container">
            <header id="sidebar-container-header">
                后台管理系统
            </header>
            <div class="sidebar-unit">
                <router-link to="/">
    
                </router-link>
            </div>
        </div>
    </template>
    
    <script>
        export default {
            name: "sidebar"
        }
    </script>
    

    就这么简单。因为 css 我觉得应该无关紧要就没贴上来了。。问题项目的全部代码都在开头的地址

    NMD,为什么。。。

    求解答,谢谢大佬。

    =========

    补充下控制台红色报错信息

    第一条

    vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'resolve' of undefined"
    
    found in
    
    ---> <RouterLink>
           <Sidebar> at src/components/sidebar.vue
             <App> at src/App.vue
               <Root>
    

    第二条

    vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'resolve' of undefined
        at Proxy.render (vue-router.esm.js?c478:1026)
        at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3548)
        at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066)
        at Watcher.get (vue.runtime.esm.js?2b0e:4479)
        at new Watcher (vue.runtime.esm.js?2b0e:4468)
        at mountComponent (vue.runtime.esm.js?2b0e:4073)
        at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8415)
        at init (vue.runtime.esm.js?2b0e:3118)
        at createComponent (vue.runtime.esm.js?2b0e:5978)
        at createElm (vue.runtime.esm.js?2b0e:5925)
    

    <router-view>也试过,也不 OK。</router-view>

    12 条回复    2020-01-09 09:43:00 +08:00
    crs0910
        1
    crs0910  
       2020-01-08 22:16:03 +08:00
    https://router.vuejs.org/zh/guide/
    你需要先“起步”
    Newyorkcity
        2
    Newyorkcity  
    OP
       2020-01-08 22:23:23 +08:00
    @crs0910 能否麻烦直接指出代码中的问题?
    shuirong1997
        3
    shuirong1997  
       2020-01-08 22:39:25 +08:00   ❤️ 1
    问题是这个:
    main.js
    ```
    new Vue({
    router,
    render: h => h(App)
    }).$mount("#app");
    ```
    你没有在 new Vue 实例的时候传入 router 参数。
    参考这个代码: https://github.com/shuiRong/VueCnodeJS/blob/master/src/main.js
    Newyorkcity
        4
    Newyorkcity  
    OP
       2020-01-08 22:52:33 +08:00
    @shuirong1997
    感谢
    new Vue({
    render: h => h(App),
    router: new VueRouter({})
    }).$mount('#app');

    这样确实就 OK 了。。。
    不过这样感觉有点别扭啊。。
    我是打算左边一个侧边栏就 sidebar 模块负责 linker-to,右边一个 mainbody 模块负责 link-view 的,然后吧 routes 写到 mainbody 模块去。那这样说明必须写在 app.vue 中么?可是我觉得 app.vue 并没有这块的职责啊。。负责相应路径展现不同模块的应该是 mainbody 模块。
    FakeLeung
        5
    FakeLeung  
       2020-01-08 23:25:14 +08:00
    @Newyorkcity #4
    你这种就是很常规的布局。
    建议先从简单的入手,先从一个 router-view 开始,再开始做 layout,然后再是做这种框架。

    不要一上来就骂街,连文档都不看。
    arslion
        6
    arslion  
       2020-01-08 23:34:48 +08:00
    要不要试试把口头禅 NMD 改成 TMD
    FakeLeung
        7
    FakeLeung  
       2020-01-08 23:35:52 +08:00
    其实稍微去看下文档(一楼附上的),再看看官方 demo,不难看出哪里出问题了。

    shuirong1997
        8
    shuirong1997  
       2020-01-09 00:06:01 +08:00   ❤️ 1
    @Newyorkcity #4 「必须写在 app.vue 中」?你看错了吧,routes 的配置必须写传给 new Vue,也就是`main.js`入口 JS 文件中而不是 App.vue 。
    另外,你 link/view 怎么布局和上面传 routes 配置无关:必须传参,然后你随便怎么布局都行。
    QingStone
        9
    QingStone  
       2020-01-09 01:49:57 +08:00 via Android
    建议多看看掘金
    Newyorkcity
        10
    Newyorkcity  
    OP
       2020-01-09 09:17:20 +08:00
    @FakeLeung
    @arslion

    ?你们都不知道那个表情包么?

    https://zh.moegirl.org/zh-hans/%E4%BD%A0%E5%A6%88%E7%9A%84%EF%BC%8C%E4%B8%BA%E4%BB%80%E4%B9%88

    这就是个梗啊,我根本就没有骂人的意思。。
    FakeLeung
        11
    FakeLeung  
       2020-01-09 09:27:59 +08:00
    Newyorkcity
        12
    Newyorkcity  
    OP
       2020-01-09 09:43:00 +08:00
    @FakeLeung
    准确地说,这个链接里一个字我都没认真看。。看到图是一样的我就发过来了。

    至于冒犯什么的,一种双向筛选吧。我是觉得这个图特别搞笑,所以这句话也是个平和的粗鄙之语。但如果别人觉得这种话就冒犯到了他,他自然是有这样的权利。但我也不会感到抱歉什么的,只会明白彼此之间性情相差甚远,没有成为朋友的可能。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4814 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 05:58 · PVG 13:58 · LAX 22:58 · JFK 01:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.