Vue router面试题_vue-router面试题

vue-router是什么，它有哪些组件?

Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得简单。包含的功能：

1. 嵌套的路由/视图表
2. 模块化的，基于组件的路由配置
3. 路由参数，查询，通配符

包含的组件
4. <router-link>
5. <router-view>

怎么定义vue-router的动态路由？怎么获取传过来的值？

我们可以在vue-router的路由路径中使用“动态路径参数”来达到这个效果，动态路径参数以冒号开头。

怎么获取？
一个“路径参数”使用冒号：标记，当匹配到一个路由时，参数值会被设置在this.$route.params,可以在每个组件中使用。

或者通过普通?name=xxx来传参，参数会存放在this.$route.query中，

区别：query通过url传参，刷新页面参数还在，params刷新页面参数就不在了。为什么

路由组件和路由为什么解耦，怎么解耦？

因为在组件中使用$route会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的URL上使用，限制了其灵活性，所以要解耦。

耦合如以下代码所示，Home组件只有在http://localhost:8036/home/123URL上才能使用。

const Home = {
	template:`
		<div>User {{$route.params.id}}</div>
	`,
}

const router = new VueRouter({
	routes:[{
		path:'/home/:id',
		component:HOme
	}],
})

1
2
3
4
5
6
7
8
9
10
11
12
13

使用props来解耦

1. props为true，route.params会被设置为组件属性
2. props为对象，则按原样设置为组件属性
3. props为函数，http://localhost:8080/home?id=123,会把123传给组件Home的props的id

const Home = {
	props:['id'],
	template:`<div>{{id}}</div>`,
}
const router = new VueRouter({
	routes:[{
		path:'/home/:id',
		component:Home,
		props:true,
		//对于包含命名视图的路由，你必须分别为每个命名视图添加props选项：
	},{
		path:'/home/:id',
		component:{
			default:Home,
			sidebar:Sidebar
		},
		props:{
			default:true,
			sidebar:false,
		},
	},{
		path:'/home',
		component:Home,
		props:{
			id:123,
		},
	},{
		path:'/home',
		component:Home,
		props:(route) => {
			id:route.query.id
		}
	}],
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

vue-router有哪几种导航守卫？

1. 全局导航守卫
   1.1 前置守卫router.beforeEach(to,from,next)
   1.2 导航确认后，DOM未渲染前router.beforeResolve(to,from,next)
   1.3 后置守卫router.afterEach(to,from)
2. 单独路由守卫
   2.1 beforeEnter(to,from,next)
3. 组件内的守卫
   3.1 前置守卫beforeRouteEnter(to,from,next)
   3.2 更新守卫beforeRouteUpdate(to,from,next)
   3.3 后置守卫beforeRouteLeave(to,from,next)

router和route的区别

router对象

$router对象: $router对象是全局路由的实例，是new VueRouter()的实例

route对象

$route表示当前的路由信息

vue router响应路由参数的变化怎么做？

当使用动态路径参数时，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

1. beforeRouteUpdate(to,from,next)

watch:{
	$route:{
		handler(to,from){
		},
		immediate:true,
	}
}
1
2
3
4
5
6
7

3. 为了实现真正的组件新创建，可以给router-view添加一个不同的key，这样就不会重用组件了

Vue项目实现路由按需加载(路由懒加载)的方式

let routes = [{
	path:'/index',
	name:'index',
	component:() => import('@/components/index')
}]
1
2
3
4
5

vue-ruoter怎么重定向？

设置redirect属性为重定向的位置

{
	path:'/comp1',
	name:'comp1',
	component:() => import('@/components/comp1'),
	redirect:'/comp2',//第一种方式
	redirect:{name:'comp2'},//第二种方式
	refirect:to => {//第三种方式
		const {hash,params,query} = to
		if(query.to === 'foo'){
			return {path:'/foo',query:null}
		}else {
			return '/b'
		}
	},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

怎么配置404页面

在routes数组的最后一项设置path：*的配置项

//放在最后
{
	path:'*',
	component:() => import('@/components/none404'),
}
1
2
3
4
5

切换路由时，需要保存草稿的功能，怎么实现呢？

<keep-alive>
	<router-view></router-view>
</keep-alive>
1
2
3

路由有几种模式，说说它们的区别？

1. hash：vue router默认模式，兼容所有浏览器，包括不支持HTML5 history api的浏览器
2. history：兼容能支持HTML5 history api的浏览器，依赖HTML5 history api来实现前端路由，没有#
3. abstract:支持所有js运行环境，如Node.js服务器端。如果发现没有浏览器的api，路由会自动强制进入这个模式。

讲一下完整的导航守卫流程？

导航被触发。

1. 在失活的组件里调用 beforeRouteLeave 守卫。
2. 调用全局的 beforeEach 守卫。
3. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
4. 在路由配置里调用 beforeEnter。

解析异步路由组件。
5. 在被激活的组件里调用 beforeRouteEnter。
6. 调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
7. 调用全局的 afterEach 钩子。
触发 DOM 更新。
8. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

路由导航守卫和Vue实例生命周期钩子函数的执行顺序？

路由导航守卫都是在Vue实例生命周期钩子函数之前执行的。

讲一下导航守卫的3个参数的含义

//to:即将要进入的目标路由对象
//from:当前导航正要离开的路由对象
//next:函数，必须调用，不然路由跳转不过去。其中：
//next():正常进入下一个路由
//next(false):中断当前的导航
//next('/'): 重定向到其它路由
beforeEach(to,from,next){

}

1
2
3
4
5
6
7
8
9
10

在afterEach钩子中可以使用next()吗？

不可以，不接受next参数

在beforeRouteEnter导航守卫中可以用this吗？

不可以，因为守卫在导航确认前被调用，新组建还没有被创建。
可以通过传一个回调给next来访问组件实例，在导航被确认？？？不应该是组件创建完成吗的时候执行回调，并且把组件实例作为回调方法的参数。

说说你对router-link的了解

<router-link>是vue router的内置组件，在具有路由功能的应用中作为声明式的导航使用。有8个porps

• to: 必填，表示目标路由的链接。当被点击后，内部会立刻把to的值传到router.push(),这个值可以是一个字符串或者是对象。
• replace：默认false，true的话，内部调用router.replace()而不是router.push()
• append: 设置append属性后，则在当前路径前添加基路径
• tag：默认为a，设置router-link被渲染后的标签
• exact: 是否精确匹配，默认为false。
• event：声明可以用来触发导航的事件，默认是click。