vue路由⾯试题10. vue-router怎么重定向页⾯？
路由中配置 redirect 属性【ri ːdə ai k t】
11. 说说你对router-link的了解
⽤于跳转路由, 类似于a标签, 它⼀般也会渲染成a标签,
但是可以通过tag来【变更】【渲染的元素】, 通过to来跳转
12. vue-router怎么配置404页⾯？
const router = new VueRouter(
{
mode: 'history',
routes: [
{ path: '*', component: NotFoundComponent }
]
}
)
将 path:* 放在最后，【pɑθ】
因为如果放在前⾯会导致后⾯的的不能匹配，
13. 切换路由时，需要保存草稿的功能，怎么实现呢？
1.⽤keep-alive缓存那个路由
2.可以⽤beforeDestroy
或者beforeunload解决性能问题
14. vue-router如何【响应路由参数】的变化？
向 router-view 组件中添加 key
<router-view :key="$route.fullPath"></router-view>
$route.fullPath 包含其【参数信息】和hash完整路径
15. 问题：为什么要【响应参数】变化？react面试题中的router
路由参数发⽣了变化，但是页⾯数据并未及时更新，需要强制刷新后才会变化。
16. scrollBehavior
17. vue-router是⽤来做什么的？它有哪些组件？
通俗来讲主要是来实现页⾯的跳转，
通过设置不同的path，向服务器发送的不同的请求，获取不同的资源。
主要组件：router-view、router-link
18. route和router有什么区别？
route：代表当前【路由信息对象】，可以获取到当前路由的【信息参数】
router：是vueRouter的实例的对象，包含了路由的跳转⽅法，钩⼦函数等
19. vue-router路由有⼏种模式？说说它们的区别？
vue-router 有 3 种路由模式：hash、history、abstract，对应的源码如下所⽰：
hash: 使⽤ hash 值来作路由。⽀持所有浏览器。
history : 有些浏览器不⽀持
abstract : [ æ bˈstræ k t] ⽀持所有 JavaScript 运⾏环境，如 Node.js 服务器端。
如果发现没有浏览器的 API，路由【会⾃动强制进⼊】这个模式.
20. vue-router有哪⼏种导航钩⼦（导航守卫）？
答：三种，
第⼀种：是全局导航钩⼦：
router.beforeEach(to,from,next){}
router.afterEach(to,from,next){}
作⽤：跳转前进⾏判断拦截。 2个
第⼆种：组件内的钩⼦
beforeRouteEnter (to, from, next) { }
beforeRouteLeave(to, from, next){ }
第三种：单独路由独享钩⼦
beforEnter:(to, form,next) => {
}
21.在vue组件中怎么获取到当前的路由信息？
可以 console.log(this.$route) 查看其详细信息
22.你有看过vue-router的源码吗？说说看
完成了router-link和 router-view 两个组件的注册，
router-link⽤于触发路由的变化，
router-view⽤于展⽰【对应路由的视图】
混⼊beforeCreate⽣命周期处理，全局设置VUE静态访问$router和$route，⽅便后期访问
根据【路由配置】⽣成router实例
根据配置【数组】⽣成【路由配置记录表】
调⽤init()函数，完成⾸次路由的渲染，
根据router的match函数，
⽣成⼀个新的route对象，
接着通过 confirmTransition对⽐⼀下【新⽣成】的route和【当前的route对象】是否改变，改变的话触发updateRoute，更新current属性，
触发根组件的_route的变化，从⽽导致组件的调⽤render函数，更新router-view。
另外⼀种更新路由的⽅式是主动触发，
router-link绑定了click⽅法，触发history.push或者place,
从⽽触发ansitionTo

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。