面试总结+详细解答，前端面试百分之九十九过的技巧（一，2024最新中高阶前端面试题总结

this.$router.push({

path: ‘/user’,

query: {userId: ‘123’}

})

//接收

this.userId = this.$route.query.userId;

name 和 path 跳转的区别在于

• name 传参用 params，path 传参用 query。

• 用 name 跳转后参数不会携带到 url 上，用 query 传参参数会携带到 url 上。

3.5 路由守卫

全局前置守卫

注意一定要调用 next(); ，否则钩子就不会被 resolved。

const router = new VueRouter({ … })

router.beforeEach((to, from, next) => {

// …

next();

})

全局解析守卫

在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

全局后置钩子

你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：

router.afterEach((to, from) => {

// …

})

路由独享的守卫

你可以在路由配置上直接定义 beforeEnter 守卫：

const router = new VueRouter({

routes: [

{

path: ‘/foo’,

component: Foo,

beforeEnter: (to, from, next) => {

// …

}

}

]

})

这些守卫与全局前置守卫的方法参数是一样的。

组件内的守卫

最后，你可以在路由组件内直接定义以下路由导