第三课时: vue-router路由进阶

2024年3月9日 145次阅读 来源: 岳_轻风

1. 路由组件传参
页面组件可以通过props接收url参数
布尔模式
{

path: '/argu/:name',
name: 'argu',
component: () => import('@/views/argu.vue'),
props: true

}
对象模式
{

path: '/about',
name: 'about',
component: () => import('@/views/About.vue'),
props: {
    food: 'banana'
}

}
函数模式
{

path: '/search',
component: SearchUser,
props: (route) => ({ query: route.query.q })

}

2. HTML5 History模式
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,例: loccalhost:8080/#/,#就是hash模式

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
mode: ‘history’,
routes: […]
})

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！
不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

或者

在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。
const router = new VueRouter({
mode: ‘history’,
routes: [

{ path: '*', component: NotFoundComponent }

]
})

3. 导航守卫

1.导航被触发。
2.在失活的组件里调用离开守卫。
3.调用全局的 beforeEach 守卫。
4.在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5.在路由配置里调用 beforeEnter。
6.解析异步路由组件。
7.在被激活的组件里调用 beforeRouteEnter。
8.调用全局的 beforeResolve 守卫 (2.5+)。
9.导航被确认。
10.调用全局的 afterEach 钩子。
11.触发 DOM 更新。
12.用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

4. 路由元信息
定义路由的时候可以配置 meta 字段

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

5. 过渡效果

<template>
  <div id="app">
    <transition-group name="router">
        <router-view key="default"/>
        <router-view key="email" name="email"/>
        <router-view key="tel" name="tel"/>
    </transition-group>
  </div>
</template>

<style lang="less">
.router-enter{
  opacity: 0;
}
.router-enter-active{
  transition: opacity 1s ease;
}
.router-enter-to{
  opacity: 1;
}
.router-leave{
  opacity: 1;
}
.router-leave-active{
  transition: opacity 1s ease;
}
.router-leave-to{
  opacity: 0;
}
</style>
    原文作者：岳_轻风
    原文地址: https://segmentfault.com/a/1190000019095724
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞