before vue路由钩子_前端面试准备笔记系列之vue(07)

最新推荐文章于 2024-04-12 15:41:43 发布

智慧之心探索真相

最新推荐文章于 2024-04-12 15:41:43 发布

阅读量124

点赞数

文章标签： before vue路由钩子

本文链接：https://blog.csdn.net/weixin_36218360/article/details/112144617

版权

正文

01. vue-router 传参方式

和name配对的是params，和path配对的是query

使用命名路由前提是，必须在注册路由的地方给路由命名(name)。命名路由传递参数使用params来传递。

// 编程式导航具体使用this.$router.push({ name: 'news', params: { userId: 123 }})// 声明式导航具体使用click to news page// 接收传递参数{{this.$route.params.userId}}

使用查询参数就是在路由地址后面带上参数和传统的url参数一致的查询参数使用query传递，同时必须使用path，不能用name。

// 编程式导航具体使用this.$router.push({ path: '/news', query: { userId: 123 }});// 声明式导航具体使用click to news page// 接收参数{{this.$route.query.userId}}

02. 命名路由(params)和查询参数(query)的异同

03. vue-router 懒加载

const router = new VueRouter({  routes: [    {      path: '/home',      name: 'Home'，      component:() = import('../views/home')}  ]})

04. vue-router 响应路由参数的变化

// 监听当前路由发生变化的时候执行watch: {  $route(to, from){    console.log(to.path)    // 对路由变化做出响应  }}

beforeRouteUpdate(to, from, next){  // to do somethings}

05. vue-router导航钩子的作用是什么？

导航钩子的主要作用就是拦截导航，让他完成跳转或者取消。

06. vue-router导航钩子的分类有哪些？

所有路由配置的组件都会触发,简单点说就是触发路由就会触发这些钩子函数。全局守卫钩子函数执行顺序是，beforeEach、beforeResolve、afterEach三个。

单个路由配置的时候也可以设置的钩子函数，且只能在这个路由下起作用。只有一个钩子函数beforeEnter

组件内执行的钩子函数，类似于数组内的生命周期函数，相当于为配置路由的组件添加的生命周期钩子函数。钩子函数按执行顺序包括beforeRouteEnter、beforeRouteUpdate(2.2新增)、beforeRouteLeave三个

07. 路由跳转导航流程解析，路由A->路由B

08. 全局守卫钩子函数的参数有什么区别？

09. 导航钩子函数参数to、from、next的含义

- to：去哪里，代表要进入的目标，它是一个路由对象
- from：从哪里来，代表当前正要离开的路由，同样也是一个路由对象
- next：这是一个必须需要调用的方法，而具体的执行效果则依赖next方法调用的参数

本文是在准备面试过程中整理的vue面试中可能遇到问题相关系列的第七篇文章，由于以上内容纯手敲，可能有手误的地方，也可能有错误的地方，希望大家指正和见谅。最后，希望与每一个努力的人同行，一起加油！！！

关注