2024年最全Vue路由及导航，2024年大厂Web前端高级面试题分享

紧跟潮流

大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

// 这里的 params 不生效

router.push({ path: ‘/user’, params: { userId }}) // -> /user

1.3 使用replace导航

在 2.2.0+，可选的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。在 3.1.0+，可以省略第二个和第三个参数，此时如果支持 Promise，router.push 或 router.replace 将返回一个 Promise。

router.replace(location, onComplete?, onAbort?)

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

使用：

this.$router.replace({path: ‘/cart’});

2.常见的几种路由

---

2.1命名路由

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称

具体做法如下：

const router = new VueRouter({

routes: [

{

  path: '/user/:userId',

  name: 'user',----通过name指明路由的名字

  component: User

}

]

})

要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：

下面这种做法就会把路由导航到 /user/123 路径。params:为传递给’:'后面的参数

User

2.2动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：

const User = {

template: ‘

User

’

}

const router = new VueRouter({

routes: [

// 动态路径参数 以冒号开头

{ path: '/user/:id', component: User }

]

})

现在呢，像 /user/foo 和 /user/bar 都将映射到相同的路由。即以/user开头的路径都会映射到User组件

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：

const User = {

template: ‘

User {{ $route.params.id }}

’

}

| 模式 | 匹配路径 | $route.params |

| — | — | — |

| /user/:username | /user/evan | { username: 'evan' } |

| /user/:username/post/:post_id | /user/evan/post/123 | { username: 'evan', post_id: '123' } |

2.3嵌套路由匹配

要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：

const router = new VueRouter({

routes: [

{

  path: '/user/:id',

  component: User,

  children: [

    {

      // 当 /user/:id/profile 匹配成功，

      // UserProfile 会被渲染在 User 的 <router-view> 中

      path: 'profile',

      component: UserProfile

    },

    {

      // 当 /user/:id/posts 匹配成功

      // UserPosts 会被渲染在 User 的 <router-view> 中

      path: 'posts',

      component: UserPosts

    }

  ]

}

]

})

3.命名视图

---

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

即通过使用name属性即可

3.1对命名视图的正确理解

该命名视图的作用就是可以通过一个链接同时展示多个组件，并且可以对这些组件进行独立布局。

其实路由配置应该像下面这样：如果你要通过一个链接同时展示多个组件。你需要要把所展示的路由组件放在一个componts下才可以。如下所示：

export default new VueRouter({

routes: [

// 动态路径参数 以冒号开头

{

// path: ‘/login/:user/name/:hjx’,

path: ‘/’,

// component:loginPage,

// name:‘hjx_login’

//命名视图

components: {

//登录界面

//注意：这里的login为name（命名），loginPage：为组件

login:loginPage,

test:test1

}

正确展示视图的做法如下：

注意：

1.这里可以通过class调整组件的样式，比如位置布局。

2.如果组件本身设置了left，top（即定位），则class对组件不起作用。

4.嵌套命名视图

---

参考地址：嵌套命名视图

5.重定向和别名

---

5.1常见的几种重定向方式

重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：

const router = new VueRouter({

紧跟潮流

大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】