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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 2103 天前的主题，其中的信息可能已经有所发展或是发生改变。

代码仓库直接扔上来了

就是通过默认的 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

2020-01-08 22:16:03 +08:00

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

Newyorkcity

2020-01-08 22:23:23 +08:00

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

shuirong1997

2020-01-08 22:39:25 +08:00

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

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

2020-01-08 23:25:14 +08:00

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

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

arslion

2020-01-08 23:34:48 +08:00

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

FakeLeung

2020-01-08 23:35:52 +08:00

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

shuirong1997

2020-01-09 00:06:01 +08:00

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

QingStone

2020-01-09 01:49:57 +08:00 via Android

建议多看看掘金

Newyorkcity

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

这就是个梗啊，我根本就没有骂人的意思。。

&nbs; 11

FakeLeung

2020-01-09 09:27:59 +08:00

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

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

Newyorkcity

2020-01-09 09:43:00 +08:00

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

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