最近整理了一些Vue-router方面的面试题

目录

1、  Vue-Router 是干什么的，原理是什么？

2、  路由之间是怎样跳转的? 有哪些方式?

3、  Vue-Router 怎么配置路由

4、  Vue-Router 有哪几种路由守卫?

5、  Vue-Router 的钩子函数都有哪些?

6、  路由传值的方式有哪几种

7、   怎么定义 Vue-Router 的动态路由?怎么获取传过来的动 态参数?

8、   query 和 params 之间的区别是什么？

9、   $route 和$router 的区别是什么？

10 、  active-class 属于哪个组件中的属性？该如何使用？

一、active-class 的使用方式

二、会产生的问题

三、解决方法

11、 Vue 的路由实现模式：hash 模式和 history 模式

12、   请说出路由配置项常用的属性及作用

---

1、  Vue-Router 是干什么的，原理是什么？

Vue-Router 是 Vue.js 官方的路由管理插件，是应用在单页面中的路由,通过对url的配置,实现url和组件的对应关系,

注:
单页面应用的意思是: 一个系统只加载一次资源,之后的操作交互、数据交互是通过路由、ajax来进行,页面并没有刷新。

vue-router 和传统页面跳转的区别是:

1. 传统的页面应用，是用一些超链接来实现页面切换和跳转的。

2. Vue 的单页面应用是基于路由和组件，路由用于设定访问 路径，并将路径和组件映射起来。在 Vue-Router 单页面应用中，则是路径之间的切换，也就是组 件的切换。路由模块的本质 就是建立起 url 和页面之间的映射关系。

实现原理是:

SPA(single page application):单一页面应用程序，只有一个完整的页面；当它在加载页面的时候，不会加载整个页面的 内容，而只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是更新视图而不重新请求页面.

目前在浏览器环境 中这一功能的实现主要有两种方式：：Hash模式、History模式

2、  路由之间是怎样跳转的? 有哪些方式?

路由之间的跳转是通过修改url 后面的地址来实现的

一共有以下四种方式来实现:

1. <router-link to="需要跳转到页面的路径"> 浏览器在解析时,会解析成类似于a标签

2. this.$router.push( ) 跳转到指定的 url，并在 history 中添加记录，点击回退按钮返回到上一个页面

3. this.$router.replace( ) 跳转到指定的 url，但是 history 中不会添加记录， 点击回退按钮返回到上个页面 上个记录不存在

4. this.$touter.go(n) 向前或者后跳转 n 个页面，n 可以是正数也可以是负数

3、  Vue-Router 怎么配置路由

在 Vue 中配置路由共分为 5 个步骤，分别是：

1, 使用npm安装 vue-router 插件

npm install --save Vue-Router 

2, 引用路由

import Router from 'Vue-Router'

3, 配置路由文件

进行路由映射配置,且在Vue实例中挂载创建的路由实例

var router = new Router({
 routes:[
  {
   path:"/hello",
   component:HelloWorld
  },
  {
  path:"/wen",
  component:HelloWen
 ]
})
   new Vue({
  el: '#app',
  components: { App },
  router,
  template: '<App/>'
 })
​

4, 视图加载的位置 ( 使用路由 )

默认 App.Vue 文件中加 <router-view></router-view>

5，跳转导航 helloword

<router-link to="/hello">helloword</router-link>（渲染出来的是 a 标签）

4、  Vue-Router 有哪几种路由守卫?

vue-router 共有四个,分别是:

• 全局守卫 router. beforeEach 进入路由之前执行

• 路由独享守卫 router.beforeEnter 如果你不想全局配置守卫的话，你可以为某些路由单独配置守卫

• 全局后置守卫 router.afterEach 和 beforeEach() 相比，这个router方法是在路由进入之后触发，并且少了一个参数next()，进入路由之后执行

• 全局解析守卫：router.beforeResolve 和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

5、  Vue-Router 的钩子函数都有哪些?

Vue-Router 中的钩子函数主要分为 3 类:

1）全局钩子函数要包含 beforeEach ,afterEach,beforeResolve

beforeEach 函数有三个参数,分别是:

• to: router 即将进入的路由对象

• from: 当前导航即将离开的路由

• next: 继续执行下一步

注意：next 方法必须要调用，否则钩子函数无法 resolved

2）单独路由独享钩子函数 beforeEnter,

使用方法与全局守卫相同
​
不同的是：全局守卫可以作用于全局，路由独享守卫只作用于被设置守卫的路由

3）组件内钩子

beforeRouterEnter，

beforeRouterUpdate,

beforeRouterLeave

• beforeRouteEnter 进入路由之前执行的函数,写在组件里可根据路由进行页面判断或传值。

• beforeRouteUpdate 在当前路由改变，但是依然渲染该组件是调用就是 当一个组件有二级导航的时候，点击二级导航的时候导航路径更新了，会触发路由钩子函数beforeRouteUpdate。

• beforeRouteLeave 离开路由之前执行的函数,可用于页面的反向传值，页面跳转。

6、  路由传值的方式有哪几种

Vue-Router 传参可以分为两大类，分别是编程式的导航 router.push 和声明式 的导航<router-link>,

编程式导航和声明式导航都有两种类型字符串类型和对象类型

1）编程式的导航 router.push

编程式导航传递参数有两种类型：字符串、对象。

字符串：字符串的方式是直接将路由地址以字符串的方式来跳转，这种方式很简单但是不能传递参数：

this.$router.push("home") 

对象： 想要传递参数主要就是以对象的方式来写，分为两种方式：命名路由、查询参数，下面分别说明两种方式的用法和注意事项。

1. 命名路由 : 使用name 命名路由这种方式传递的参数，但如果在目标页面刷新是会出错的

    this.$router.push({name:" news",params:{userId:123}) 

2. 查询参数 : 在路由地址后面带上参数和传统的url参数一致的，传递参数使用query而且必须配合path来传递参数而不能用name，目标页面接收传递的参数使用query。

   注意: 和 name 配对的式 params，和 path 配对的是 query

   this.$router.push({path:" /news',query:{uersId:123}) 
                      接收参数 this.$route.query

2）声明式导航 <router-link>

字符串: 声明式的导航和编程式是一样的

<router-link to="news">click to news page</router-link>

命名路由 :

<router-link :to:"{name:'news',params:{userid:1111}}">click to news page</route-link> 

查 询 参 数:

<router-link :to="{ path: '/news', query: { userId: 1111}}">click to news page</router-link>

7、   怎么定义 Vue-Router 的动态路由?怎么获取传过来的动 态参数?

把某个模式匹配到的所有路由，全都映射到同一个组件,并使用这个组件来进行渲染.

动态路径参数，使用 “冒号” 开头，路径参数使用冒号标记，当匹配到一个路由时，参数会被设置到this.$router.params 中,并且可以在每个组件中使用.

路径参数后，对应的值分别都会设置到 $router.query 和 $router.params 中,可以通过到this.route.query.name ,this.route.params.name两种方式获取动态参数,区别是query通过url传参,在浏览器的地址中显示且刷新页面传值还在, params浏览器的地址中不显示且刷新页面值不在了

8、   query 和 params 之间的区别是什么？

区别有以下三点:

• 第一点是 query 要用 path 来引入，params 需要用 name 来引入

• 第二点是 在接 收 参 数 时 ，分 别 是 this.$route.query.name 和 this.$route.params.name（注意：是$route 而不是$router）

• 第三点是 query 类似于我们 ajax 中 get 传参，前者在浏览器的地址中显示传值刷新还存在,params 则类似于 post,浏览器的地址中不显示 传值一刷新就没有了

9、   $route 和$router 的区别是什么？

区别是: $route是获取路由信息的一个对象, $router 的作用是进行路由跳转的

具体点说就是

$route 是“路由信息对象”，包括 path，params，hash，query，fullPath， matched，name 等路由信息参数。

$route是获取路由信息的一个对象，废话！说具体点！
这个东西它既然是获取路由信息滴，那么什么是路由信息，怎么获取，又为什么要获取呢？
举个栗子：
在实际项目中，我们经常会用到路由信息，比如：

$route.path
字符串，等于当前路由对象的路径，会被解析为绝对路径，如 “/shops/goods” 。

$route.params
对象，包含路由中的动态片段和全匹配片段的键值对 。

$route.query

对象，包含路由中查询参数的键值对。例如，对于 /home/news/detail/01?favorite=yes ，会得到$route.query.favorite == ‘yes’ 。

$route.router
路由规则所属的路由器（以及其所属的组件）。

$route.matched
数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。

$route.name
当前路径的名字，如果没有使用具名路径，则名字为空。

所以我们可以通过$route.来获取到路由里的这些信息为自己所用。这就是 $route！

 $router 为 VueRouter 的实例，相当于一个全局的路由器对象，里面含有很 多 属 性 和 子 对 象 ， 例 如 history 对 象 ， 经 常 用 的 跳 转 链 接 就 可 以 用 this.router.push 会往 history 栈中添加一个新的记录。返回上一个 history 也是使用$router.go 方法

10 、  active-class 属于哪个组件中的属性？该如何使用？

active-class是 vue-router模块中 router-link 组件中的属性，主要作用是用来实现选中
样式的切换。

一、active-class 的使用方式

在 vue-router 中使用 active-class 有两种方式:

1. 在 router-link 中写入 active-class

active-class 选择样式时根据路由中的路径（to=“/home”）去匹配，然后显示

<router-link to="/home" class="menu-home" active-class="active">首页</router-link>

2. 直接在路由 js 文件中配置 linkActiveClass

export default new Router({

linkActiveClass: 'active',

})

<div class="menu-btn">

<router-link to="/" class="menu-home" active-class="active">首页</router-link>

</div>

<div class="menu-btn">

<router-link to="/my" class="menu-my" active-class="active">我的</router-link>

</div>

二、会产生的问题

因为 to="/" 引起的，active-class 选择样式时根据路由中的路径去匹配，然后显示。
例如在 my 页面中，路由为 localhost:8081/#/my，那么 to="/”和 to="/my"都可以匹配到，所以
都会激活选中样式

三、解决方法

1. 在 router-link 中写入 exact

<router-link to="/" class="menu-home" active-class="active" exact>首页</router-link>

2. 在路由中加入重定向

<router-link to="/" class="menu-home" active-class="active" exact>首页</router-link>
 
{path: '/', redirect: '/home' }

11、 Vue 的路由实现模式：hash 模式和 history 模式

vue-router有两种模式，hash模式和history模式，它们各自的优缺点是:

hash模式优缺点:

优点

• 只需要前端配置路由表, 不需要后端的参与

• 兼容性好, 浏览器都能支持

• hash值改变不会向后端发送请求, 完全属于前端路由

缺点

• hash值前面需要加#, 不符合url规范,也不美观

history 模式:

优点：

• 符合url地址规范, 不需要#, 使用起来比较美观

• history API 是 H5 提供的新特性，允许开发者直接更改前端路由，即更新浏览器 URL 地址而不重新发起请求(将url替换并且不刷新页面)。

• 提供了两个新方法： pushState()， replaceState()可以对浏览器历史记录栈进行修改，以 及 popState 事件的监听到状态变更

缺点：

• 兼容性不如 hash，且需要服务端支持重定向，否则一刷新页面就404了

• 兼容性比较差, 利用了 HTML5 History对象中新增的 pushState() 和 replaceState() 方法,需要特定浏览器的支持.

12、   请说出路由配置项常用的属性及作用

路由常用的配置属性有以下六种:

• path：跳转路径

• component：路径相对于的组件

• name：命名路由

• children：子路由的配置参数（路由嵌套）

• props：路由解耦

• redirect：重定向路由