赞
踩
前端路由是在单页面应用的情况下,通过对每个视图展示形式匹配一个特殊的url来实现所谓的切换效果。不会重新向服务端发送请求,也不会跳转页面。无论是刷新、前进、还是后退,都可以通过特殊url实现。
全局前置/钩子:beforeEach、beforeResolve、afterEach
路由独享的守卫:beforeEnter
组件内的守卫:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
1.通过声明式路由导航跳转
<router-link :to="{ name: 'page1', param: {} }">
2.通过name或者path跳转
this.$router.push({ name: "page1", param: {} });
3.配置path,跳转
this.$router.push("/page1");
1.hash模式
location.hash 的值实际就是 URL 中#后面的东西 它的特点在于:hash 虽然出现 URL 中,但不会被包含在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。
可以为 hash 的改变添加监听事件
window.addEventListener("hashchange", callback, false);
2.history模式
1.在声明路由路径文件里面使用import方式引入组件 () => import(组件文件路径)
2.使用webpack中的require.ensure方法(不太会用)
3.通过组件内部,局部懒加载的方式
components: { comp: (resolve) => { require([path], resolve); } }
location.href进行页面跳转的时候刷新了页面,主要用于多个页面跳转,不适用于单页面应用
而Vue-router主要是通过history.pushState进行页面跳转,只用于单页面模式下
通过keep-alive
<keep-alive> <router-link v-if="$route.meta.isCache"></router-link> </keep-alive> <router-link v-if="!$route.meta.isCache"></router-link> [ { path: "/path1", name: "name1" meta: { isCache: true // 配置是否需要缓存 } } ]
当从/page/apple => /page/orange 时,
1. 可以用watch方法
// 监听页面切换 watch: { "$route.path"() { console.log("页面发生了切换"); } }2. 在路由守卫中,页面跳转都会经过路由守卫,故可以在beforeEach中监听,
// 页面跳转前的操作 beforeEach(to, from, next) { // 执行路由跳转的逻辑 doSomething(); }
1. 导航被触发
2. 在即将离开的组件里调用beforeRouteLeave守卫
3. 调用全局前置守卫beforeEach守卫
4. 在重用的组件里调用beforeRouteUpdate守卫 / 调用路由配置的beforeEnter守卫
5. 解析异步路由组件
6. 在被激活的组件里调用beforeRouteEnter
7. 调用全局的beforeResolve守卫
8. 导航被确认
9. 调用全局的 afterEach 钩子
10. 触发DOM更新
11. 用创建好的实例调用 beforeRouteEnter 守卫传给 next 的回调函数。
组件方式 <router-link>
vue-router中Api方式:$router.push、$router.replace、$router.redirect()
参考链接:
VUE之vue-router常见面试题_vue router面试题-CSDN博客 【vue】vue-Router 常见面试题_vue-router面试题-CSDN博客
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。