如何在 vue.js 中添加路由答案

【问题标题】：How to add a route in vue.js如何在 vue.js 中添加路由
【发布时间】：2019-03-18 07:07:32
【问题描述】：

我是 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 构造函数中的模板的目的是什么？如果我删除它，什么都不会发生。

我在这里错过了什么？？

【问题讨论】：

标签： vue.js vuejs2 vue-router

【解决方案1】：

这些组件应该从您的路由中加载，因此它们不应出现在您的应用模板中（即，它们应该从#app 的components 和template 中删除）。

您的应用应在某处包含<router-view> 以供渲染路线。在您的情况下，将应用模板字符串替换为 <router-view/>。

它应该看起来像这样：

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

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

【讨论】：

这样效果更好。感谢您的澄清。如何为 404 添加路线？
没问题 :) 对于 404，使用 path: '*' 作为最后一条路由。示例：{ path: '*', component: { template: '<div>Not found {{$route.path}}</div>' } }
谢谢@tony19 有没有办法为不同的错误代码制定不同的路线？（404 一个，500 一个……）

【解决方案2】：

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

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

【讨论】：

已经阅读了，我的问题没有找到任何答案...无论如何谢谢...