面试-Vue router

140 阅读2分钟

vue-router怎么配置404页面?

path: '*',但应该放在最后一个

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

vue-router钩子函数有哪些?都有哪些参数?

  • 全局的:beforeEach、beforeResolve、afterEach
  • 路由的:beforeEnter
  • 组件的:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

route和router有什么区别?

route代表当前路由对象,router代表整个vue实例下的路由对象

如果vue-router使用history模式,部署时要注意什么?

服务器的404页面需要重定向到index.html nginx try_files uriuri/ /index.html;

vue-router路由有几种模式?说说它们的区别?

共有两种模式 hash: 使用变更hash不会刷新页面的特性, 来变更路由, 做到单页面无刷新 history: 使用html5的history方法, 不支持老旧浏览器, 但是如果要部署到服务器的化, 需要在ng上进行相应的正向代理跳转, 否则拷贝的链接会打不开

说说你对router-link的了解

  • to router.push()
  • replace router.replace()
  • tag 渲染成某种标签
  • active-class 链接激活时使用的 CSS 类名
  • event 可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。

vue-router如何响应路由参数的变化

// 使用 watch 监听
watch: {
    $route(to, from){
        if(to != from) {
            console.log("监听到路由变化,做出相应的处理");
        }
    }
}
// 向 router-view 组件中添加 key
<router-view :key="$route.fullPath"></router-view>

如何获取路由传过来的参数?

  • 如果使用query方式传入的参数使用this.$route.query 接收
  • 如果使用params方式传入的参数使用this.$router.params接收

vue-router怎么重定向?

{
    path:'/goback',
    redirect:'/'
}

怎样动态加载路由?

// 权限系统
router.addRoutes

怎么实现路由懒加载呢?

const component = () =>import('./....')

你有看过vue-router的源码吗?说说看

https://www.cnblogs.com/caizhenbo/p/7297730.html

说说vue-router完整的导航解析流程是什么?

1.导航被触发;2.在失活的组件里调用beforeRouteLeave守卫;3.调用全局beforeEach守卫;4.在复用组件里调用beforeRouteUpdate守卫;5.调用路由配置里的beforeEnter守卫;6.解析异步路由组件;7.在被激活的组件里调用beforeRouteEnter守卫;8.调用全局beforeResolve守卫;9.导航被确认;10..调用全局的afterEach钩子;11.DOM更新;12.用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数。

切换到新路由时,页面要滚动到顶部或保持原先的滚动位置怎么做呢?

vue-router 页面切换后保持在页面顶部而不是保持原先的滚动位置的办法:
https://www.cnblogs.com/kugeliu/p/7172042.html
vue2.0路由切换后页面跳转后新页面滚动位置不变BUG(滚动条回到顶部的位置):
https://blog.csdn.net/ZHIYUANfL/article/details/79241655
返回到上次滚动位置:
https://blog.csdn.net/yan263364/article/details/84402595