Vue router应用问题怎么解决
这篇文章主要讲解了"Vue router应用问题怎么解决"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"Vue router应用问题怎么解决"吧！
问题记录
路由守卫的应用
根据路由守卫绑定的位置不同，有下面三种路由守卫
全局守卫
beforeEach/beforeResolve/afterEach
路由独享守卫
beforeEnter
组件内的守卫
beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave
其完整的导航解析过程，看官方文档的说明是这样的：
导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
下面是几个常用钩子的实际应用场景：
beforeRouteLeave：跳转页面前，提醒用户，是否保存信息，或者自动为用户保存草稿。
beforeEach：判断是否登录、是否有权限等等，做跳转登录、申请权限、处理权限菜单等操作。
beforeRouteUpdate：重新进入相同页面时，重新初始化、加载数据。
beforeRouteEnter：获取当前页面的前一个页面的信息，比如我们在登录页，登录后要重定向到前一个页面，就可以通过这个钩子获取。注意：这里， 不！能！获取组件实例 this，因为新组件还没有被创建。不过，可以传一个回调，给next来访问实例，在创建好实例后，会执行。
beforeRouteEnter (to, from, next) { next(vm => { // 通过 `vm` 访问组件实例 })}其他几个路由守卫，我这边不常用，有补充的观众欢迎留下评论。
动态路由实现权限控制
应用场景：管理端根据不同权限，需要展示不同的菜单栏，同时希望没有权限的用户无法访问某些页面。
解决方案：我们在进入路由前，做一个拦截，先判断是否需要处理页面权限，再判断是否已经处理了权限，如果回答都是"是"，我们不需要做处理。否则，请求接口，获取到当前用户的权限菜单，再根据后台返回的信息，给router动态添加路由，再重新进入路由（避免拦截的访问是新添加的路由，出现访问不到的问题）。
具体看下面的伪代码：
router.beforeEach((to, from, next) => { if (needAuthority(to.name)) { //不需要判断权限的页面，不处理 next() return } if (alreadyGetAuthorityMenu) { //已经处理过权限菜单，不再处理 next() return } handleAuthority().then(()=>{ next({ ...to, replace: true }) //处理权限菜单接口成功，动态路由已经添加了，重新进入路由 }).catch(() => { console.log('请求权限菜单接口错误') next() })})在handleAuthority中我们做了这些事情
判断是否有权限，没有权限的用户，跳转到权限申请页面
根据后台传过来的权限列表，用router.addRoutes(routes: Array)这个API，给router动态添加需要权限控制的页面对应的路由。
给router动态添加一个兜底页面，可以是提示没权限的页面，或者简单一个404页面。
需要注意的是，动态添加路由后，需要next({ ...to, replace: true })重新进入路由，否则，如果拦截的页面路由，是你后面才添加的路由，那新的路由会访问不到。
hash模式的路由参数被干扰
应用场景：比如微信分享链接会加上，类似'?from=singlemessage&isappinstalled=0'这类的参数，当我们使用hash模式路由，同时使用params的方式传参数的时候，常常会被外界的参数干扰到，导致页面无法访问或者参数获取不到，使用动态路由参数是更好的选择。
const router = new VueRouter({ routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ]})const userId = '123'// 两种跳转方式router.push({ name: 'user', params: { userId }}) // -> /user/123router.push({ path: `/user/${userId}` }) // -> /user/123// 这里的 params 不生效router.push({ path: '/user', params: { userId }}) // -> /user更进一步，我们可以使用props，将组件和路由解耦，在组件中定义id这个props，就能拿到传递的参数。
const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, props: true } ]})跳转同组件路由，不刷新？
应用场景：跳转同个组件的页面，但是参数不同，期望重新刷新页面。
解决方案：我们可以在beforeRouteUpdate中，重新执行进入页面要执行的代码，但如果需要初始化所有变量，难免有遗漏，更简单的方式是，监听route变化，有变化是 this.$router.go(0)刷新。
// 推荐beforeRouteUpdate(to, from, next) { // 重新加载数据 next();},watch: { '$route'(to, from) { this.$router.go(0) }}感谢各位的阅读，以上就是"Vue router应用问题怎么解决"的内容了，经过本文的学习后，相信大家对Vue router应用问题怎么解决这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！
