• 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.$router 或 this.$route。 ...
  2021-08-29 13:01:55 | VUE
• Vue Router-14-数据获取
  数据获取 有时候，进入某个路由后，需要从服务器获取数据。例如，在渲染用户信息时，你需要从服务器获取用户的数据。 我们可以通过两种方式来实现： 导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。 导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。 ...
  2021-08-29 13:01:55 | VUE
• Vue Router-13-元信息
  路由元信息 有时，你可能希望将任意信息附加到路由上，如过渡名称、谁可以访问路由等。 这些事情可以通过接收属性对象的meta属性来实现，并且它可以在路由地址和导航守卫上都被访问到。 定义路由的时候你可以这样配置 meta 字段： const routes = [ { path: '/posts', component: PostsLayout, childr...
  2021-08-29 13:01:55 | VUE
• Vue Router-12-导航守卫
  导航守卫 正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。 这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。 全局前置守卫 你可以使用 router.beforeEach 注册一个全局前置守卫： const router = createRouter({ ... }) router.beforeEach((to, from)...
  2021-08-29 13:01:55 | VUE
• Vue Router-11-不同的历史模式
  不同的历史模式 在创建路由器实例时，history 配置允许我们在不同的历史模式中进行选择。 Hash 模式 hash 模式是用 createWebHashHistory() 创建的： import { createRouter, createWebHashHistory } from 'vue-router' const router = createRouter({ his...
  2021-08-29 13:01:55 | VUE