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
,组件内可以访问的当前路由和路由器实例;
-
-
-