摘要：
导航故障 导航故障，或者叫导航失败。 当使用 router-link 组件时，Vue Router 会自动调用 router.push 来触发一次导航。 虽然大多数链接的预期行为是将用户导航到一个新页面，但也有少数情况下用户将留在同一页面上： 用户已经位于他们正在尝试导航到的页面 一个导航守卫通过调 阅读全文
posted @ 2021-10-18 18:01
慕斯星球
阅读(985)
评论(0)
推荐(0)
摘要：
路由懒加载 路由懒加载 当打包构建应用时，js包会变得非常大，影响页面加载。 结合Vue的异步组件和Webpack的代码分割功能，可以实现路由懒加载，即把不同路由对应的组件分割成不同代码块，当路由被访问的时候才加载对应组件。 Vue异步组件 将异步组件定义为返回一个Promise的工厂函数，该函数返 阅读全文
posted @ 2021-10-18 16:54
慕斯星球
阅读(255)
评论(0)
推荐(0)
摘要：
滚动行为 滚动行为 vue-router可以让你自定义路由切换时页面如何滚动(滚动到顶部或保持原先的滚动位置)。 注：该功能只在支持history.pushState的浏览器中可用。 可以在Router实例中提供一个scrollBehavior方法： const router = new VueRo 阅读全文
posted @ 2021-10-18 16:11
慕斯星球
阅读(581)
评论(0)
推荐(0)
摘要：
数据获取 有时候进入某个路由后，需要从服务器获取数据。 可从两种方式来实现：导航完成后获取、导航完成前获取。 导航完成后获取(先跳转，再渲染数据) 先完成导航，再在接下来的组件生命周期钩子(created)中获取数据。 数据获取期间，显示‘加载中’之类的提示。 注：最初始生命周期钩子created在 阅读全文
posted @ 2021-10-18 01:36
慕斯星球
阅读(678)
评论(0)
推荐(0)
摘要：
Vue Router v3.4 基础 起步 动态路由匹配 嵌套路由 编程式导航 命名路由 命名视图 重定向和别名 路由组件传参 HTML5 History模式 进阶 导航守卫 路由原信息 过渡动效 数据获取 滚动行为 路由懒加载 导航故障 API参考 Vue Router 4.0 (改动m/添加i) 阅读全文
posted @ 2021-10-18 01:36
慕斯星球
阅读(57)
评论(0)
推荐(0)
摘要：
过渡动效 过渡动效 <router-view>是基本的动态组件，可以用<transition>组件给其添加一些过渡效果： <transition> <router-view></router-view> </transition> 单个路由的过渡 上面用法(在每个组件都使用默认<transition 阅读全文
posted @ 2021-10-18 00:28
慕斯星球
阅读(295)
评论(0)
推荐(0)
摘要：
路由元信息 配置meta字段 { path: '/home', name: 'Home', component: () => import('@/views/Home'), meta: {requiresAuth: true} } 访问meta字段 路由记录 称呼routes配置中的每个路由对象为路 阅读全文
posted @ 2021-10-18 00:06
慕斯星球
阅读(244)
评论(0)
推荐(0)
浙公网安备 33010602011771号