vue-router
-
vue-router怎么重定向页面？
router文件配置redirect
-
vue-router怎么配置404页面？
路由里配置一个path * 然后redirect 404 即可
-
切换路由时，需要保存草稿的功能，怎么实现呢？
使用keep-live 不明白看这个 https://segmentfault.com/a/1190000011978825
-
vue-router路由有几种模式？说说它们的区别？
hash和history
hash是 利用 onhashchange事件去处理页面的 可以获取当前和之前的页面路径 从而形成跳转 也就是所谓的前端路由 这样前端切换 也不会给后台发送请求
window.onhashchange = function(event){
console.log(event);
}history模式 是window.history对象上 有3个方法 back 后退 forward 前进 和 go 去某页
然后配合 h5 新的api 针对history对象的 在切换地址的时候 不发送请求 从而实现了单页 不过 刷新问题需要后台配置 否则404
HTML5新增的API
A)history.pushState(data, title [, url])：往历史记录堆栈顶部添加一条记录； data会在onpopstate事件触发时作为
参数传递过去；title为页面标题，当前所有浏览器都会 忽略此参数；url为页面地址，可选，缺省为当前页地址；
B)history.replaceState(data, title [, url]) ：更改当前的历史记录，参数同上；
C)history.state：用于存储以上方法的data数据，不同浏览器的读写权限不一样；
D)window.onpopstate：响应pushState或replaceState的调用；有了这几个新的API，针对支持的浏览器，-
vue-router有哪几种导航钩子（ 导航守卫 ）？
全局钩子 beforeEach 和afterEach
单个路由钩子 写在路由里的 beforeEnter
组件内钩子
beforeRouteEnter(to, from, next) {
// do someting
// 在渲染该组件的对应路由被 confirm 前调用
},
beforeRouteUpdate(to, from, next) {
// do someting
// 在当前路由改变，但是依然渲染该组件是调用
},
beforeRouteLeave(to, from ,next) {
// do someting
// 导航离开该组件的对应路由时被调用
}全局解析守卫
router.beforeResolve 注册一个全局守卫，和 router.beforeEach 类似，
钩子流程
导航被触发
在失活的组件里调用离开守卫
调用全局的 beforeEach 守卫
在重用的组件里调用 beforeRouteUpdate 守卫
在路由配置里调用 beforEnter
解析异步路由组件
在被激活的组件里调用 beforeRouteEnter
调用全局的 beforeResolve 守卫
导航被确认
调用全局的 afterEach 钩子
触发 DOM 更新
在创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数
-
说说你对router-link的了解
route-link上 处理 常用的to 是去跳转页面外 还有其他属性
比如 replace 跳转的同时 不会存到history里
比如 append 是在当前路径后继续追加路径
比如 tag是变幻标签
比如event 是改变触发事件
比如 active-class exact-active-class 是匹配后的class样式 等等
地址 https://blog.csdn.net/qq_39327418/article/details/89946513
-
vue-router如何响应路由参数的变化？
看如何传参 query 和params的2种方式传参 一个在路径上 一个隐式 隐式的刷新会丢失 用this.$route接参就行 this.$router是路由实例
-
你有看过vue-router的源码吗？说说看
https://www.cnblogs.com/caizhenbo/p/7297730.html
-
切换到新路由时，页面要滚动到顶部或保持原先的滚动位置怎么做呢？
路由守卫
router.afterEach((to,from,next) => {
window.scrollTo(0,0);
});或者 router 实例化的时候 有一个回调scrollBehavior 函数 返回 x0 y0即可
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}-
在什么场景下会用到嵌套路由？
二级子菜单
-
如何获取路由传过来的参数？
query 和params 用this.$route这个对象
-
说说active-class是哪个组件的属性？
router-link
-
在vue组件中怎么获取到当前的路由信息？
this.$router是路由实例 this.$route 是路由信息
-
vur-rounter怎么重定向？
redirect
-
怎样动态加载路由？
router的 addroutes方法
-
怎么实现路由懒加载呢？
() => import('@/views/login/index')
-
路由之间是怎么跳转的？有哪些方式？
router-link js就是
this.$router.push
跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面
this.$router.replace
跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)
this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数-
如果vue-router使用history模式，部署时要注意什么？
刷新404
-
route和router有什么区别？
一个是路由实例 一个是路由信
