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

[Newyorkcity]

代码仓库直接扔上来了

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>

[crs0910]

https://router.vuejs.org/zh/guide/
你需要先“起步”

[Newyorkcity]

@crs0910 能否麻烦直接指出代码中的问题？

[shuirong1997]

问题是这个：
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]

@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]

@Newyorkcity #4
你这种就是很常规的布局。
建议先从简单的入手，先从一个 router-view 开始，再开始做 layout，然后再是做这种框架。

不要一上来就骂街，连文档都不看。

[arslion]

要不要试试把口头禅 NMD 改成 TMD

[FakeLeung]

其实稍微去看下文档（一楼附上的），再看看官方 demo，不难看出哪里出问题了。

[shuirong1997]

@Newyorkcity #4 「必须写在 app.vue 中」？你看错了吧，routes 的配置必须写传给 new Vue，也就是`main.js`入口 JS 文件中而不是 App.vue 。
另外，你 link/view 怎么布局和上面传 routes 配置无关：必须传参，然后你随便怎么布局都行。

[QingStone]

建议多看看掘金

[Newyorkcity]

@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]

@Newyorkcity #10
自己发的链接都不仔细看。唉。

https://tva1.sinaimg.cn/large/006tNbRwgy1gaq1xoyfz5j31kk0u0kgx.jpg

[Newyorkcity]

@FakeLeung
准确地说，这个链接里一个字我都没认真看。。看到图是一样的我就发过来了。

至于冒犯什么的，一种双向筛选吧。我是觉得这个图特别搞笑，所以这句话也是个平和的粗鄙之语。但如果别人觉得这种话就冒犯到了他，他自然是有这样的权利。但我也不会感到抱歉什么的，只会明白彼此之间性情相差甚远，没有成为朋友的可能。