Question

我是javascript和vue.js的新手，尝试在现有程序中添加新路线时遇到了一些问题。

我在名为Miniature.vue的单独文件中创建了新组件

我在路由器定义中添加了新路由：

  export default new Router({
  routes: [
    {
      path: '/certificat/:id',
      name: 'Certificat',
      component: Certificat
    },
    {
      path: '/miniature/:id',
      name: 'Miniature',
      component: Miniature
    }
  ]
})

然后，在vue实例中，我添加了新组件并更新了模板：

new Vue({
el: '#app',
router,
components: { Certificat, Miniature } ,
template: '<div>
            <Certificat></Certificat>
            <Miniature></Miniature>
            </div>'
})

以前的模板就是

template: '<Certificat/>'

问题是，URL是mywebsite / certificat / 123或mywebsite / miniature / 123，两个路由都已执行，并且显示了我的两个组件！无论如何，Vue构造函数中模板的目的是什么？如果我删除它，什么也不会发生。

我在这里想念什么??

Answer 1

这些组件应该从您的路线中加载，因此它们不应放在您的应用模板中（即，应从#app的{{1}}和components中删除它们）。

您的应用程序应在某处包含<router-view>，以便呈现路线。您可以使用template替换应用模板字符串。

它应该看起来像这样：

<router-view/>

我应该提到您的路由器设置缺少new Vue({ el: '#app', router, template: '<router-view/>' })和/的路由，因此默认路径和未知路由不会在您的应用中呈现任何内容。用户必须导航到您配置的确切路线才能看到任何内容。

Answer 2

Vue没有内置路由，要进行路由，您需要vue-router软件包。

一般来说，为了更好地了解template和Vue，我建议阅读Introduction guide

如何在vue.js中添加路线

2 个答案: