vue-router面试题

老电影故事

已于 2023-08-21 09:36:52 修改

阅读量2.1k

点赞数 2

分类专栏： VUE 文章标签： vue.js javascript 前端

于 2021-11-10 00:55:25 首次发布

本文链接：https://blog.csdn.net/weixin_44582045/article/details/121239755

版权

VUE 专栏收录该内容

66 篇文章 9 订阅

订阅专栏

一、vue-router是什么？

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

二、route和$router的区别？

$route是路由信息对象，包括‘path，hash，query，fullPath，matched，name’等路由信息参数； 
$router是路由实例对象，包括了路由的跳转方法，实例对象等

三、vue-router怎么配置路由？

在vue中配置路由分为5个步骤，分别是：
	引入vue-router.js
	配置路由path和组件, 和生成路由对象
	把路由对象配置到new Vue中router选项下
	页面使用<router-view></router-view> 承载路由
	<router-link to="要跳转的路径"></router-link> 设置路由导航(声明式导航方式/编程式跳转)

四、路由之间是怎么跳转的？有哪些方式？

声明式导航：
1、<router-link to="需要跳转到页面的路径">

编程式导航：
2、this.$router.push()跳转到指定的url，并在history中添加记录，点击回退返回到上一个页面
3、this.$router.replace()跳转到指定的url，但是history中不会添加记录，点击回退到上上个页面
4、this.$touter.go(n)向前或者后跳转n个页面，n可以是正数也可以是负数

五、vue-router的钩子函数都有哪些？

	全局导航钩子：beforeEach  afterEach

Router.beforeEach((to,from,next)=>{
      ......
})
Router.afterEach((to,from,next)=>{
      ......
})

	单独路由独享钩子：beforeEnter  beforeLeave

{
  path:"/home",
  component:resolve=>require(["../components/home.vue"],resolve),
  beforeEnter:(to,from,next)=>{
      ......
  },
  beforeLeave:(to,from,next)=>{
      ......
  }
}

	组件内的钩子：beforeRouteLeave  beforeRouteEnter  beforeRouteUpdate

methods:{
      beforeRouteLeave(to,from,next){
            .......
      }
  }

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

声明式导航：

1. 使用router-link的to属性进行路由跳转 to的值是要跳转到的那个路由

// 1.1 to后直接跟路由
<router-link to="/home">to home</router-link> 
// 1.2 to后跟一个配置对象path属性是要跳转到的那个路由
<router-link :to="{ path: '/home' }">to home</router-link> 
// 1.3 to后跟一个配置对象，使用命名路由的name进行跳转
<router-link :to="{ name: 'homeIndex' }">to home</router-link>

2. 查询字符串形式 路由传参  to的值是一个配置对象 以查询字符串形式携带 url?id=123
// 2.1 以 url?id=123&name=zs的形式携带
<router-link :to="{ path: '/home?id=123' }">to home?id=123</router-link>
// 2.2 以query属性进行传参
<router-link :to="{ path: '/home', query: { id: 123 } }">to home 以query携带</router-link>
// 2.3 以params进行传参 需要命名路由name
<router-link :to="{ name: 'userIndex', params: { id: 123 } }">to user 以params携带</router-link>

编程式导航：

1. 使用this.$router进行跳转 $router可以访问到路由的实例

this.$router.push('/home')
this.$router.push('/home?id=123')

param:
params传参可以认为是post的方法，因为他的一种传参方法是看不到参数的，获取的时候通过params来获取。通过name来匹配相应的组件。

this.$router.push({
        name:'gameInfo',
        params:{
            gameId:3,
            userId:2
        }
})
路由中的配置：
{
        path:'gameInfo',
        name:gameInfo,
        component:()=>import('./views/gameInfo')
}
接收参数：
this.$route.params.gameId

query:
query传参可以认为是get传参，参数会在请求的url中显示出来，以？，&连接。

this.$router.push({
    path:'/gameInfo',
    query:{
        uId:123,
        gameId:3
    }
})

{
    path:'/gameInfo',
    name:gameInfo,
    component:()=>import('./views/gameInfo')
}
接收参数
this.$route.query.uId

总结：query传参通过path跳转，params传参通过name跳转

$router实例的跳转方法
push() 跳转到指定的路由，向history历史中添加记录，点击返回，返回到来之前的路由。
go(n) 向前前进 n 或 后退 n个路由 n可为负数
replace() 跳转到指定的路由，但是不会在history中添加记录，点击返回，会跳转到上上一个路由。
back() 后退
forward() 前进

注意:
以查询字符串 query进行传递的参数，刷新页面，数据依然存在。
以params传递的参数，刷新页面就会丢失。
跳转用$router
获取参数用route

七、Vue的路由实现模式：hash模式和history模式（必会原理）

前端路由是指在SPA单页面应用中通过JS实现的浏览器对URL的控制和管理，使得用户在访问不同的URL时，能够渲染出不同的视图，而不需要每次都从服务器重新请求页面，前端路由实现主要有两种方式：

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用 window.location.hash 读取。通过监听浏览器的hashChange来切换视图，将不同的hash与不同的视图对应起来。
特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。

history模式：history采用HTML5的新特性；且提供了两个新方法： pushState()， replaceState()
可以对浏览器历史记录栈进行修改，实现对URL的控制和管理，以及popState事件的监听到状态变更

当使用这种历史模式时，URL 会看起来很 "正常"，例如 https://example.com/user/id。漂亮!
不过，问题来了。由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 https://example.com/user/id，就会得到一个 404 错误。这就尴尬了。
不用担心：要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源，它应提供与你的应用程序中的 index.html 相同的页面。漂亮依旧!

八、请说出路由配置项常用的属性及作用（必会）

	路由配置参数：

	path : 跳转路径  
	component : 路径相对于的组件  
	name:命名路由  
	children:子路由的配置参数(路由嵌套)  
	props:路由解耦  
	redirect : 重定向路由

九、Vue如何去除URL中的#（必会）

vue-router 默认使用 hash 模式，所以在路由加载的时候，项目中的 URL 会自带 “#”。如果不想使用 “#”，可以使用 vue-router 的另一种模式 history：new Router ({ mode : ‘history’, routes: [ ]})

需要注意的是，当我们启用 history 模式的时候，由于我们的项目是一个单页面应用，所以在路由跳转的时候，就会出现访问不到静态资源而出现 “404” 的情况，这时候就需要服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 “index.html” 页面。

十、说一下你在vue中踩过的坑（必会）

1、第一个是给对象添加属性的时候，直接通过给data里面的对象添加属性然后赋值，新添加的属性不是响应式的

【解决办法】通过Vue.set(对象，属性，值)这种方式就可以达到，对象新添加的属性是响应式的

2、 在created操作dom的时候，是报错的，获取不到dom，这个时候实例vue实例没有挂载

【解决办法】通过：Vue.nextTick(回调函数进行获取)

十一、路由懒加载

把不同路由对应的组件分割成不同的代码块，然后当路由被访问时才加载对应的组件即为路由的懒加载，可以加快项目的加载速度，提高效率

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      name: 'Home'，
      component:() = import('../views/home')
		}
  ]
})