026.整理几个面试题——关于路由
Posted Composition55555
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了026.整理几个面试题——关于路由相关的知识,希望对你有一定的参考价值。
关于路由
关于路由
网上收集整理
01. 【vue-router】 是什么?
Vue-router
:即SPA(单页应用)的路径管理器- 路由模块的本质:就是建立起
url
和组件之间的一一映射关系
02. 【active-class】 是哪个组件的属性?
vue-router
模块的包括两个组件:router-link
组件router-view
组件
active-class
属于router-link
组件的属性
03. 在【router-link】注册事件无效?
- 使用
@click.native
- 原因:
router-link
会阻止click事件 - 添加
.native
可以直接监听一个原生事件
- 原因:
04. 如何定义动态路由?
-
当需要经常把某种模式匹配到所有的路由,全部都映射到同一个组件时,可以通过配置动态路由来实现
-
动态路由匹配:在路由路径中使用动态路径参数进行匹配,其本质就是利用
url
传递参数
05. vue-router 有哪几种导航钩子?
- 全局守卫
- 全局前置守卫:
router.beforeEach
- 全局解析守卫:
router.beforeResolve
- 全局后置钩子:
router.afterEach
- 全局前置守卫:
- 路由独享守卫
- 为某个路由对象单独配置的守卫:
beforeEnter
- 为某个路由对象单独配置的守卫:
- 组件内守卫
beforeRouteEnter
:在进入路由前、组件实例创建之前调用- 在这个阶段不能获取组件实例
this
- 但可以通过给
next()
方法传递一个回调来访问组件实例
- 在这个阶段不能获取组件实例
beforeRouteUpdate
:在路由改变,但又复用同一个组件时调用- 如:从
/user1
跳转到user/2
- 如:从
beforeRouteLeave
:在离开当前路由时调用
06. 路由守卫可以接收什么参数?
- 每个守卫方法可有接收三个参数
-
to
:即将前往的目标路由对象 -
from
:当前正要离开的路由对象 -
next
:一个方法,导航守卫的执行效果依赖于这个方法的调用参数-
next()
:表示放行,可以前往目标路由 -
next(false)
:表示中断当前导航 -
next(‘/’)
:表示中断当前导航,并跳转到一个新的路由- 这里内部参数设置同路由跳转参数设置一致
-
next(error)
:表示终止导航,并传递一个Error
实例- 这个错误实例将被
router.onError()
注册的回调接收
- 这个错误实例将被
-
-
07. 如何监听路由变化?
-
参数或查询的改变,并不会触发进入(离开)的导航守卫
- 但可以通过监听
$route
对象来应对这些变化,或使用beforeRouteUpdate
的组件内守卫
- 但可以通过监听
-
通过watch监听路由变化
export default watch: $route(to, from) // do something
08. 【 r o u t e 】 和 【 route】 和 【 route】和【router】的区别
-
$route
是获取路由信息的一个对象// 如: export default created() let id = this.$route.params; // 获取 params对象参数,没有路由参数则为 空对象 let query = this.$route.query; // 获取 query对象参数,没有则为 空对象 let name = this.$route.name; // 获取 当前路由的 名称 let hash = this.$route.hash; // 获取 当前路由的 hash值,包括 # ,没有则为空字符串 let path = this.$route.path; // 获取 当前路由对象的路径---绝对路径 let fullPath = this.$route.fullPath; // 获取 当前路由的完整URL,包含查询参数和hash的完整路径 let matched = this.$route.matched; // 获取 当前路由下 路由声明的所有信息、记录 let redirectedForm = this.$route.refirectedForm; // 获取 当前路由重定向的来源路由(如果有重定向)
-
$router
是进行路由跳转的路由实例对象// 如: export default methods: toRoute() this.$router.push( path: '...', // 跳转路径 params: , // params参数 query: // query参数 ); this.$router.replace(); // 替换当前路由 this.$router.go(1); // 前进、后退
09. 页面传参
-
URL传参
-
params
显式传参时- 需要在路由配置中的
path
后面添加参数名 - 且参数会成为路由的一部分:
/child/123
- 页面刷新时,不会丢失参数
- 需要在路由配置中的
-
params
隐式传参时- 需要用
name
属性匹配参数 - 参数不会显示到路径上,且页面刷新时会清空参数
- 需要用
-
用
query
传参时- 可以用
path
属性和name
属性来匹配路由 query
参数会正常显示在URL地址栏上:/child?id=123
- 页面刷新时不会清空参数
- 可以用
-
同时设置
params
和query
对象参数时- 如果用
name
进行匹配,两个对象参数都可以传递 - 如果用
path
进行匹配,只能传递query
参数 - 如果用
name
和path
进行匹配,将以name
优先- 即两个对象参数都可以传递
- 如果用
-
-
Props传参
- 布尔类型
- 对象类型
- 函数类型
10. vue-router的路由模式有几种
-
hash
模式:使用 URL hash 值来作路由 -
history
模式:依赖 html5 History API 和服务器配置 -
abstract
模式:支持所有 javascript 运行环境,如 Node.js 服务器端- 如果发现没有浏览器的 API,路由会自动强制进入这个模式
switch (mode) case 'history': this.history = new HTML5History(this, options.base) break case 'hash': this.history = new HashHistory(this, options.base, this.fallback) break case 'abstract': this.history = new AbstractHistory(this, options.base) break default: if (process.env.NODE_ENV !== 'production') assert(false, `invalid mode: $mode`)
11. 路由模式实现原理?
-
hash 路由模式的实现主要是基于下面几个特性:
- 使用 URL 的 hash 来模拟一个完整的 URL,当 URL 改变时,页面不会重新加载
- URL 中 hash 值只是客户端的一种状态,也就是说当向服务器端发出请求时,hash 部分不会被发送
- hash 值的改变,都会在浏览器的访问历史中增加一个记录
- 因此我们能通过浏览器的回退、前进按钮控制hash的切换
- 可以通过 a 标签,并设置 href 属性,当用户点击这个标签后,URL 的 hash 值会发生改变
- 或者使用 JavaScript 来对
loaction.hash
进行赋值,改变 URL 的 hash 值
- 或者使用 JavaScript 来对
- 我们可以使用 hashchange 事件来监听 hash 值的变化,从而对页面进行跳转(渲染)
回顾一下:
在学习HTML的时候,我们知道
<a>
标签可以创建锚点,并且可以跳转<!-- 定义锚点 --> <a href="#bottom" name="top">点击跳转到底部</a> <div style="height:3000px;"></div> <!-- 定义跳转链接 --> <a href="#top" name="bottom">点击跳转到顶部</a>
在浏览器里点击跳转链接时
我们可以看到地址栏里的基本路径没有变化
但在路径之后增加了
#top
、#bottom
页面滚动到了对应的锚点处
-
history 路由模式的实现主要基于存在下面几个特性:
pushState
和repalceState
两个 API 来操作实现 URL 的变化- 我们可以使用
popstate
事件来监听 url 的变化,从而对页面进行跳转(渲染) history.pushState()
或history.replaceState()
不会触发popstate
事件,这时我们需要手动触发页面跳转(渲染)
12. 如何实现路由懒加载?
-
第一种:箭头函数+import,按需导入
-
第二种:箭头函数+require,
-
第三种:使用
webpack
提供的require.ensure()
技术- 对多个路由指定相同的
chunkName
,会合并打包成一个js文件
// r就是resolve const List = r => require.ensure([], () => r(require('@/components/list')), 'list'); // 路由也是正常的写法 这种是官方推荐的写的 按模块划分懒加载 const router = new Router( routes: [ path: '/list', component: List, name: 'list' ] ))
- 对多个路由指定相同的
以上是关于026.整理几个面试题——关于路由的主要内容,如果未能解决你的问题,请参考以下文章