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-linkrouter-view,分别实现页面跳转和内容显示;

        • 定义两个全局变量(app.config.globalProperties):$route$router,组件内可以访问的当前路由和路由器实例;

posted @ 2022-09-07 10:08  Mochenghualei  阅读(572)  评论(0)    收藏  举报