Vue面试题12：如何定义动态路由，如何获取传递过来的动态参数？如果让你实现一个vue路由，说一说思路

• 回答范例

  • 1.很多时候，我们需要将给定匹配模式的路由映射到同一个组件，这种情况就需要定义动态路由；
  • 2.例如，我们可能有一个User组件，它应该对所有用户进行渲染，但用户ID不同。在Vue Router中，我们可以在路径中使用一个动态字段来实现，例如：{path:'/users/:id'，component:User}，其中:id就是路径参数；
  • 3.路径参数用冒号 : 表示。当一个路由被匹配时，它的params的值将在每个组件中以this.$route.params的形式暴露出来；
  • 4.参数还可以有多个，例如/users/:username/posts/:postId；除了$route.params之外，$route对象还公开了其他有用的信息，如$route.query、$route.hash等；

• 实现一个vue路由的思路：

  • 思路分析：

    • 首先思考vue路由要解决的问题：用户点击跳转链接内容切换，页面不刷新；

    • 借助hash或者history api实现url跳转页面不刷新；

    • 同时监听hashchange事件或者popstate事件处理跳转；

    • 根据hash值或者state值从routes表中匹配对应component并渲染之；

  • 回答范例：

    • 需求分析：一个SPA应用的路由需要解决的问题是页面跳转内容改变同时不刷新，同时路由还需要以插件形式存在，所以：

    • 1.首先定义一个createRouter函数，返回路由器实例，实例内部做几件事：

      • 保存用户传入的配置项；

      • 监听hash或者popstate事件（取决于当前的模式）；

      • 回调里根据path匹配对应路由，render到router-view中；

    • 2.将router定义成一个Vue插件，即实现install方法，内部做两件事：

      • 注册两个全局组件（app.component）：router-link和router-view，分别实现页面跳转和内容显示；

      • 定义两个全局变量（app.config.globalProperties）：$route和$router，组件内可以访问的当前路由和路由器实例；