Loading [MathJax]/jax/output/HTML-CSS/jax.js
个人简介

Echo Blog


江湖无名 安心练剑
  • Vue Router-21-动态路由
    动态路由 添加路由到你的路由上通常是通过 routes 配置来完成的,但是在某些情况下,你可能想在应用程序已经运行的时候添加或删除路由。 具有可扩展接口(如 Vue CLI UI )这样的应用程序可以使用它来扩展应用程序。 添加路由 动态路由主要通过两个函数实现。 router.addRoute() 和 router.removeRoute()。 它们只注册一个新的路由,也就是说...
    2021-08-29 13:01:55 | VUE
  • Vue Router-20-导航故障
    等待导航结果 当使用 router-link 组件时,Vue Router 会自动调用 router.push 来触发一次导航。 虽然大多数链接的预期行为是将用户导航到一个新页面,但也有少数情况下用户将留在同一页面上: 用户已经位于他们正在尝试导航到的页面 一个导航守卫通过调用 return false 中断了这次导航 当前的导航...
    2021-08-29 13:01:55 | VUE
  • Vue Router-19-扩展 RouterLink
    扩展 RouterLink RouterLink 组件提供了足够的 props 来满足大多数基本应用程序的需求,但它并未尝试涵盖所有可能的用例,在某些高级情况下,你可能会发现自己使用了 v-slot。 在大多数中型到大型应用程序中,值得创建一个(如果不是多个)自定义 RouterLink 组件,以在整个应用程序中重用它们。 例如导航菜单中的链接,处理外部链接,添加 inactive-c...
    2021-08-29 13:01:55 | VUE
  • Vue Router-18-路由懒加载
    路由懒加载 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。 如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就会更加高效。 Vue Router 支持开箱即用的 动态导入,这意味着你可以用动态导入代替静态导入: // 将 // import UserDetails from './views/UserDetails'...
    2021-08-29 13:01:55 | VUE
  • Vue Router-17-滚动行为
    滚动行为 使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。 注意: 这个功能只在支持 history.pushState 的浏览器中可用。 当创建一个 Router 实例,你可以提供一个 scrollBehavior 方法: const router ...
    2021-08-29 13:01:55 | VUE
  • Vue Router-16-过渡动效
    过渡动效 想要在你的路径组件上使用转场,并对导航进行动画处理,你需要使用 v-slot API: <router-view v-slot="{ Component }"> <transition name="fade"> <component :is="Component" /> </transition> </rou...
    2021-08-29 13:01:55 | VUE
  • Vue Router-15-组合式 API
    Vue Router 和 组合式 API 引入 setup 和 Vue 的组合式 API,开辟了新的可能性,但要想充分发挥 Vue Router 的潜力,我们需要使用一些新的函数来代替访问 this 和组件内导航守卫。 在 setup 中访问路由和当前路由 因为我们在 setup 里面没有访问 this,所以我们不能再直接访问 this.routerthis.route。 ...
    2021-08-29 13:01:55 | VUE
  • Vue Router-14-数据获取
    数据获取 有时候,进入某个路由后,需要从服务器获取数据。例如,在渲染用户信息时,你需要从服务器获取用户的数据。 我们可以通过两种方式来实现: 导航完成之后获取:先完成导航,然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。 导航完成之前获取:导航完成前,在路由进入的守卫中获取数据,在数据获取成功后执行导航。 ...
    2021-08-29 13:01:55 | VUE