如何在 vue.js 中添加路线

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

Vue 没有内置路由，对于路由你需要 vue-router 包。

为了更好地理解 template 和 Vue，我建议阅读 Introduction guide

Answer 2

这些组件应该从您的路线加载，所以它们不应该在您的应用程序模板中（即，它们应该从 #app 的 components 和 template).

您的应用应在某处包含 <router-view> 以便呈现路线。在您的情况下，将应用程序模板字符串替换为 <router-view/>.

它看起来应该类似于：

new Vue({
  el: '#app',
  router,
  template: '<router-view/>'
})

我应该提到您的路由器设置缺少 / 和 404 的路由，因此默认路径和未知路由将不会在您的应用程序中呈现任何内容。用户必须导航到您配置的确切路线才能看到任何内容。

如何在 vue.js 中添加路线

How to add a route in vue.js

vue.js

vue-router

vuejs2