主页 / 问题 / 775108
Accepted
Дмитрий Полянин
Asked:2020-01-24 22:32:47 +0000 UTC2020-01-24 22:32:47 +0000 UTC

为什么路由器链接元素不呈现？

  • 772

我有一个文件app.vue

<template>
    <h1>Hello App!</h1>
    <p>
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
    </p>
    <router-view></router-view>
</template>

<script>
    import VueRouter from "vue-router";

    export default {
        name: 'app'
    }
</script>

和可执行文件main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router";

Vue.use(VueRouter);

const Foo = {template: '<div>foo</div>'}
const Bar = {template: '<div>bar</div>'}

const routes = [

    {path: '/foo', component: Foo},
    {path: '/bar', component: Bar}
]

const router = new VueRouter({
    routes // сокращение от `routes: routes`
})

const app = new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

呈现应用程序，没有显示错误，但router-link没有链接。我不知道出了什么问题。

对于我使用的汇编rollup，我不知道这是否重要。

我是Vue.js新手，我想了解如何使用.vue文件、路由和基本模板制作项目。

通过添加决定div

<template>
    <div> /* добавил */
        <h1>Hello App!</h1>
        <p>
            <!-- используйте компонент router-link для создания ссылок -->
            <!-- входной параметр `to` определяет путь для перехода -->
            <!-- `<router-link>` по умолчанию преобразуется в тег `<a>` -->
            <router-link to="/foo">Go to Foo</router-link>
            <router-link to="/bar">Go to Bar</router-link>
        </p>
        <!-- отображение компонента, для которого совпал путь -->
        <router-view/>
    </div>
</template>

但是为什么div需要这个，我不明白？

javascript

1 个回答

  1. Best Answer

    通过添加解决div。但是为什么div需要这个，我不明白？

    在 Vue 中，任何组件的 html 模板在顶层不能包含多个元素。这样做是为了简化组件代码注入的实现。

    以下是 Vue 开发人员在GitHub 问题中的评论，要求能够在单个组件中包含多个顶级元素：

    虽然这本身就很有用，但目前它需要对 vdom 实现进行重大更改才能支持它。这是属于“显然很高兴但目前不是重点领域”的内容。当我们在未来对 vdom 进行重大改进时，我们将重新审视这一点。

    这个特性看起来很有用，但添加它需要对虚拟 DOM 的当前实现进行重大更改。我的意思是，显然拥有它会很棒，但这不是现在需要关注的事情。也许在下一个版本中会有所改变。

    关于这部分：

    我是 Vue.js 的新手，我想了解如何使用 .vue 文件、路由和主模板制作项目。

    恕我直言，最方便的方法是使用vue-cli和现成的模板之一创建项目，例如webpack。

    我不知道这是否与webpack有关，但是在构建阶段会检测到具有多个顶级组件的错误。

    • 1

相关问题