个人简介

Echo Blog


江湖无名 安心练剑
  • 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
  • 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
  • Vue Router-10-将 props 传递给路由组件
    将 props 传递给路由组件 在你的组件中使用 $route 会与路由紧密耦合,这限制了组件的灵活性,因为它只能用于特定的 URL。虽然这不一定是件坏事,但我们可以通过 props 配置来解除这种行为: 我们可以将下面的代码 const User = { template: '<div>User </div>' } const routes = [{ pa...
    2021-08-29 13:01:55 | VUE
  • Vue Router-09-重定向和别名
    重定向 重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b: const routes = [{ path: '/home', redirect: '/' }] 重定向的目标也可以是一个命名的路由: const routes = [{ path: '/home', redirect: { name: 'homepage' } }] 甚至是一个方法,动态...
    2021-08-29 13:01:55 | VUE
  • Vue Router-08-命名视图
    命名视图 有时候想同时 (同级) 展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar (侧导航) 和 main (主内容) 两个视图,这个时候命名视图就派上用场了。 你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。 如果 router-view 没有设置名字,那么默认为 default。 <router-view class="view left...
    2021-08-29 13:01:55 | VUE