19/3/31学习笔记

UnixAgain 发布于2019-08-26 13:39 / 1070人阅读

摘要：在失活的组件里调用离开守卫。调用全局的守卫。用创建好的实例调用守卫中传给的回调函数。路由元信息定义路由的时候可以配置字段

vue-router
1 router-link 导航到不同组件
Go to Foo
Go to Bar
定义路由
const routes = [
{ path: "/foo", component: Foo },
{ path: "/bar", component: Bar }
]
当对应的路由匹配成功，将自动设置 class 属性值 .router-link-active

2 动态路由匹配
routes: [

// 动态路径参数 以冒号开头
{ path: "/user/:id", component: User }

]
3 嵌套路由，在组件中还包含多个子组件且存在路由跳转
routes: [

{ path: "/user/:id", component: User,
  children: [
    {
      // 当 /user/:id/profile 匹配成功，
      // UserProfile 会被渲染在 User 的  中
      path: "profile",
      component: UserProfile
    },
    {
      // 当 /user/:id/posts 匹配成功
      // UserPosts 会被渲染在 User 的  中
      path: "posts",
      component: UserPosts
    }
  ]
}

]

4 编程式导航
除了可以通过跳转，还可以通过 this.$router.push() 的方式跳转（注意path的方式，params不能生效）
// 字符串
router.push("home")

// 对象
router.push({ path: "home" })

// 命名的路由
router.push({ name: "user", params: { userId: "123" }})

// 带查询参数，变成 /register?plan=private
router.push({ path: "register", query: { plan: "private" }})
注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：
const userId = "123"
router.push({ name: "user", params: { userId }}) // -> /user/123
router.push({ path: /user/${userId} }) // -> /user/123
// 这里的 params 不生效
router.push({ path: "/user", params: { userId }}) // -> /user

this.$router.replace()
router.replace(location, onComplete?, onAbort?)
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

5 重定向

重定向

重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：

const router = new VueRouter({
routes: [

{ path: "/a", redirect: "/b" }

]
})
重定向的目标也可以是一个命名的路由：

const router = new VueRouter({
routes: [

{ path: "/a", redirect: { name: "foo" }}

]
})

6 导航守卫
全局前置守卫
你可以使用 router.beforeEach 注册一个全局前置守卫：

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
// ...
})

完整的导航解析流程
导航被触发。
在失活的组件里调用离开守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

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

const router = new VueRouter({
routes: [

{
  path: "/foo",
  component: Foo,
  children: [
    {
      path: "bar",
      component: Bar,
      // a meta field
      meta: { requiresAuth: true }
    }
  ]
}

]
})

云服务器混合云学习笔记学习笔记一基础学习笔记深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109237.html

ApacheCN 人工智能知识树 v1.0

摘要：贡献者飞龙版本最近总是有人问我，把这些资料看完一遍要用多长时间，如果你一本书一本书看的话，的确要用很长时间。为了方便大家，我就把每本书的章节拆开，再按照知识点合并，手动整理了这个知识树。 Special Sponsors showImg(https://segmentfault.com/img/remote/1460000018907426?w=1760&h=200); 贡献者：飞龙版...

刘厚水 2019-06-26 19:00 评论0 收藏0
【LNMPR源码学习】笔记汇总

摘要：此文用于汇总跟随陈雷老师及团队的视频，学习源码过程中的思考整理与心得体会，此文会不断更新视频传送门每日学习记录使用录像设备记录每天的学习源码学习源码学习内存管理笔记源码学习内存管理笔记源码学习内存管理笔记源码学习基本变量笔记此文用于汇总跟随陈雷老师及团队的视频，学习源码过程中的思考、整理与心得体会，此文会不断更新视频传送门：【每日学习记录】使用录像设备记录每天的学习 PHP7...

gougoujiang 2019-08-01 14:06 评论0 收藏0
【LNMPR源码学习】笔记汇总

摘要：此文用于汇总跟随陈雷老师及团队的视频，学习源码过程中的思考整理与心得体会，此文会不断更新视频传送门每日学习记录使用录像设备记录每天的学习源码学习源码学习内存管理笔记源码学习内存管理笔记源码学习内存管理笔记源码学习基本变量笔记此文用于汇总跟随陈雷老师及团队的视频，学习源码过程中的思考、整理与心得体会，此文会不断更新视频传送门：【每日学习记录】使用录像设备记录每天的学习 PHP7...

aristark 2019-07-24 16:34 评论0 收藏0
【LNMPR源码学习】笔记汇总

摘要：此文用于汇总跟随陈雷老师及团队的视频，学习源码过程中的思考整理与心得体会，此文会不断更新视频传送门每日学习记录使用录像设备记录每天的学习源码学习源码学习内存管理笔记源码学习内存管理笔记源码学习内存管理笔记源码学习基本变量笔记此文用于汇总跟随陈雷老师及团队的视频，学习源码过程中的思考、整理与心得体会，此文会不断更新视频传送门：【每日学习记录】使用录像设备记录每天的学习 PHP7...

Barrior 2019-07-25 14:52 评论0 收藏0
React 入门学习笔记整理目录

摘要：入门学习笔记整理一搭建环境入门学习笔记整理二简介与语法入门学习笔记整理三组件入门学习笔记整理四事件入门学习笔记整理五入门学习笔记整理六组件通信入门学习笔记整理七生命周期入门学习笔记整理八入门学习笔记整理九路由React 入门学习笔记整理（一）——搭建环境 React 入门学习笔记整理（二）—— JSX简介与语法 React 入门学习笔记整理（三）—— 组件 React 入门学习笔记整理（...

daryl 2019-04-23 11:57 评论0 收藏0