2024年最新Vue全家桶之Vue-router路由(五)，2024年最新面试怎么学

原创 于 2024-05-15 02:32:02 发布
· 815 阅读 · 17 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #面试 #学习

算法刷题

大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。

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

写在最后

最后，对所以做Java的朋友提几点建议，也是我的个人心得：

  1. 疯狂编程

  2. 学习效果可视化

  3. 写博客

  4. 阅读优秀代码

  5. 心态调整

  • replace ： replace 不会留下 history 记录，所以指定 replace 的情况下，后退键返回不能返回到上一个页面中

  • active-class ：当 <router-link> 对应的路由匹配成功时,会自动给当前元素设置一个 router-link-active 的 class，设置 active-class 可以修改默认的名称(一般不需要改)

  • 在进行高亮显示的导航菜单或者底部tabbar时, 会使用到该类

  • 但是通常不会修改类的属性, 会直接使用默认的router-link-active即可

Home

About

2.4、路由代码跳转

有时候, 页面的跳转可能需要执行对应的JavaScript代码, 这个时候, 就可以使用第二种跳转方式了，也就是编程式导航。

例如，我们需要点击按钮然后进行跳转

<button @click=“homeClick”>首页

<button @click=“aboutClick”>关于

3、Vue-router的常见用法

===================================================================================

3.1、路由重定向

路由重定向 指的是：用户在访问 地址 A 的时候， 强制用户跳转 到地址 C ，从而展示特定的组件页面。

通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：

const router = new VueRouter({

// 在 routes 数组中,声明路由的匹配规则

routes: [

// 当用户访问 / 的时候,通过 redirect 属性跳转到 /home 对应的路由规则

{

path: ‘/’,

redirect: ‘/home’

}

]

})

3.2、路由的懒加载

  • 首先, 我们知道路由中通常会定义很多不同的页面.

  • 这个页面最后被打包在哪里呢? 一般情况下, 是放在一个js文件中.

  • 但是, 页面这么多放在一个js文件中, 必然会造成这个页面非常的大

  • 如果我们一次性从服务器请求下来这个页面, 可能需要花费一定的时间, 甚至用户的电脑上还出现了短暂空白的情况.

  • 如何避免这种情况呢? 使用路由懒加载就可以了

路由懒加载做了什么？

  • p路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块.

  • 只有在这个路由被访问到的时候, 才加载对应的组件

3.2.1、懒加载的方式

在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割

const Home = () => import(‘…/components/Home.vue’)

例如：

// 配置路由相关的信息

import VueRouter from ‘vue-router’

import Vue from ‘vue’

// 原始路由加载

// import Home from ‘…/components/Home’

// 路由懒加载(推荐)

const Home = () => imports(‘…/components/Home’)

// 1.通过Vue.use(插件), 安装插件

Vue.use(VueRouter)

const routes = [ // 在 routes 数组中,声明路由的匹配规则

{

// path 表示要匹配的 hash 地址,component 表示要展示的路由组件

path: ‘/’,

name: ‘Home’,

component: Home

},

{

path: ‘/about’,

name: ‘About’,

component: () => import(‘…/views/About.vue’)

}

]

const router = new VueRouter({

// 配置路由和组件之间的应用关系

routes,

mode: ‘history’,

linkActiveClass: ‘active’

})

// 3.将router对象传入到Vue实例

export default router

3.3、动态路由

动态路由指的是：把 Hash 地址中可变的部分 定义为参数项 ，从而提高路由规则的复用性 。

在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径

  • /user/aaaa 或 /user/id

  • 除了有前面的 /user 之外，后面还跟上了用户的 ID

  • 这种 path 和 Component 的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)

我们在 src/router/index.js 中配置路由

  • 使用英文的冒号 (: ) 来定义路由的参数项

{

path: ‘/user/:id’,

component: User

}

在 User.vue 组件中,可以获取到 id 的值，从而展示对应的用户详情

User组件 ------- {{this.$route.params.id}}

我们也可以在主组件 App.vue 中获取到路由参数

用户

3.4、使用props接收路由参数

为了简化路由参数的获取形式，vue-router 允许在 路由规则中开启 props 传参 。

  1. 我们在 src/router/index.js 中配置路由

定义路由规则时，声明 props: true 选项

{

path: ‘/user/:id’,

component: User,

props: true

}

  1. 在 User.vue 组件中,可以获取到 id 的值，从而展示对应的用户详情

User组件 ------- {{id}}

  1. 在主组件 App.vue 中也可以获取到路由参数

用户

3.5、传递参数的方式

传递参数主要有两种类型: params 和 query

3.5.1、params的类型

  • 配置路由格式: /router/:id

  • 传递的方式: 在path后面跟上对应的值

  • 传递后形成的路径: /router/123, /router/abc

3.5.2、query的类型

  • 配置路由格式: /router, 也就是普通配置

  • 传递的方式: 对象中使用query的key作为传递方式

  • 传递后形成的路径: /router?id=123, /router?id=abc

例如我们在 App.vue 里面向其他路由 ‘/profile’ 传递对象参数

<router-link :to ="{

path:‘/profile’,

query:{name: ‘why’,age: 18,height:1.88}}">

在 Profile.vue 组件里面也可以取到传递过来的参数

我是 Profile 组件

{{this.$route.query}}

{{this.$route.query.name}}

{{this.$route.query.age}}

{{this.$route.query.height}}

3.6、嵌套路由

嵌套路由是一个很常见的功能，比如在home页面中, 我们希望通过 /home/news 和 /home/message 访问一些内容，

一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件

实现嵌套路由有两个步骤：

  1. 创建对应的子组件, 并且在路由映射中配置对应的子路由.，使用 children 属性声明子路由规则

  2. 在组件内部使用<router-view>标签.

在这里插入图片描述

我们创建好 HomeNews.vue 和 HomeMessage.vue 后，在 src/router/index.js 中配置路由映射

// 配置路由相关的信息

import VueRouter from ‘vue-router’

import Vue from ‘vue’

// 路由懒加载(推荐)

const Home = () => imports(‘…/components/Home’)

const HomeNews = () => imports(‘…/components/HomeNews’)

const HomeMessage = () => imports(‘…/components/HomeMessage’)

// 1.通过Vue.use(插件), 安装插件

Vue.use(VueRouter)

const routes = [

{

// Home 页面的路由规则(父级路由规则)

path: ‘/home’,

name: ‘Home’,

component: Home,

// 通过 children 属性,嵌套声明子级路由规则

children: [

{

// 默认路径

path: ‘’,

redirect: ‘news’

}，

{

path: ‘news’,

component: HomeNews

},

{

path: ‘messages’,

component: HomeMessage

}

]

},

]

const router = new VueRouter({

// 配置路由和组件之间的应用关系

routes,

mode: ‘history’,

linkActiveClass: ‘active’

})

// 3.将router对象传入到Vue实例

export default router

由于我们的 HomeNews.vue 和 HomeMessage.vue 都是 Home 路由的子路由，所以我们需要在 Home.vue 进行显示

Home 组件

新闻

消息

3.7、$ router 和$route的区别

  • $router 为VueRouter实例，想要导航到不同URL，则使用$router.push方法

  • $route为当前 router 跳转对象里面可以获取name、path、query、params等

4、导航守卫

========================================================================

在这里插入图片描述

我们来考虑一个需求: 在一个SPA应用中, 如何改变网页的标题呢?

  • 网页标题是通过<title>来显示的, 但是SPA只有一个固定的HTML, 切换不同的页面时, 标题并不会改变.

  • 但是我们可以通过JavaScript来修改<title>的内容 window.document.title = '新的标题'

  • 那么在Vue项目中, 在哪里修改? 什么时候修改比较合适呢?

普通的修改方式:

  • 我们比较容易想到的修改标题的位置是每一个路由对应的组件.vue文件中.

  • 通过mounted声明周期函数, 执行对应的代码进行修改即可.

  • 但是当页面比较多时, 这种方式不容易维护(因为需要在多个页面执行类似的代码).

  • 有没有更好的办法呢? 使用导航守卫即可.

什么是导航守卫?

  • vue-router提供的导航守卫主要用来监听监听路由的进入和离开的.

  • vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发

// 配置路由相关的信息

import VueRouter from ‘vue-router’

import Vue from ‘vue’

import Home from ‘…/components/Home’

import About from ‘…/components/About’

import User from “…/components/User”;

// 1.通过Vue.use(插件), 安装插件

Vue.use(VueRouter)

// 2.创建VueRouter对象

const routes = [

{

path: ‘’,

// redirect重定向

redirect: ‘/home’

},

{

path: ‘/home’,

component: Home,

meta: {

title: ‘首页’

}

},

{

path: ‘/about’,

component: About,

meta: {

title: ‘关于’

}

},

]

const router = new VueRouter({

// 配置路由和组件之间的应用关系

routes,

mode: ‘history’,

})

// 前置钩子hook(前置回调)

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

// 从 from 跳转到 to

window.document.title = to.meta.title

next()

})

// 3.将router对象传入到Vue实例

export default router

4.1、全局前置守卫

每次发生路由的导航跳转时，都会触发全局前置守卫 。因此，在全局前置守卫中，程序员可以对每个路由进行访问权限的控制：

const router = new VueRouter({

routes,

})

// 调用路由实例对象的 beforeEach 方法,即可声明"全局前置守卫"

// 每次发生路由跳转的时候,都会触发这个方法

// 全局前置守卫

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

// to 是将要访问的路由的信息对象

// from 是将要离开的路由的信息对象

// next 是一个函数,调用 next()表示放行,允许这次路由导航

})

导航钩子的三个参数解析：

  • to ： 即将要进入的目标的路由对象

  • from：当前导航即将要离开的路由对象

  • next：调用该方法后，才能进入下一个钩子

注意：如果是前置钩子beforeEach，必须要调用 next() 函数，如果是后置钩子afterEach，不需要主动调用 next() 函数

4.2、next函数的三种调用方式

在这里插入图片描述

  • 当前用户拥有后台主页的访问权限，直接放行： next()

  • 当前用户没有后台主页的访问权限，强制其跳转到登录页面：next('/login')

  • 当前用户没有后台主页的访问权限，不允许跳转到后台主页：next(false)

常用的JavaScript设计模式

  • 单体模式

  • 工厂模式

  • 例模式

函数

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值