vueday04-day05

Paitmmer
88 阅读4分钟

组件插槽

可以在父组件中直接修改子组件的 ui

匿名插槽

具名插槽

<slot name="middle"></slot>

作用域插槽

在模板中添加插槽时通过动态绑定一个自定义属性然后们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字,并接受数据.(一般拿到的都是一个对象)

<template v-slot:right="scope">

          {{scope}}

          <button>确认2</button>

</template>

<slot name="right" :msg="'子组件的数据'">

插槽的优点

  • 可以在父组件中定制子组件的 ui

  • 可以解决多层组件传参问题

  • 可以对组件进行抽离方便管理

路由

路由是一种对应关系

什么是后端路由

客户端请求的 url 地址和服务端对该地址的处理函数的对应关系

什么是前端路由

路由是根据不同的 url 地址展示不同的内容或页面

前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据 url 的不同返回不同的页面实现的

路由的两种模式

hash

  • 有#号
  • 在hash模式下#号之后的所有字符包含在url中，但是不包含在http请求中。所以改变hash值不会重新加载页面，对传给后端的url没有任何影响，因此不会重新加载页面。它每次改变都会触发hashchange事件，可以通过给window加上hashchange事件进行监听。它是单页面的标配。
  • 兼容性好一些

history

  • 没有#号,例如:http://yoursite.com/user/id
  • 利用了 HTML5 新增的 pushState() 和 replaceState() 方法，在原有的back、forward、go 的基础上，添加对历史记录修改的功能。他虽然改变了url，但是浏览器不会立即向后端发送请求。
  • history模式下有一个问题，就是当页面刷新时，他会实实在在的发送请求，把url给传送过去，因此，如果后端没有做处理的话，就会因找不到资源而报404错误，因此使用history模式时可以跟后端进行配合。如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面

什么时候使用前端路由

在单页面应用，大部分页面结构不变，只改变部分内容的时候使用

前端路由有什么优缺点

  • 优点：

  用户体验好，不需要每次都从服务器全部获取，快速展现给用户

  • 缺点：

  - 不利于 SEO

  - 使用浏览器的前进，后退键的时候会重新发送请求，没有合理利用缓存

  - 单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置

vue 中路由基本使用

  1. 通过 script 标签引入 vue-router

  2. 定义组件

  3. 实例化路由对象 new VueRouter

  4. 配置路由的规则

   #/home ---> 组件

  1. 挂载路由

   设置路由和 vue 的关系

  1. 渲染路由

   router-view

   router-link

路由高亮

  • router-link-active

  • linkActiveClass: 'active'(适合引入第三方库直接放类名)

路由重定向、404

  • redirect

 {

    path: '/',

    redirect: '/home'

  }'
  • 404

  {

    path: '*',

    component: NotFoundPage

  }'

路由传参

  • query

  #/home?name=fly&age=18

  • params

  #/home/fly/18

  {

      path: '/home/:name/:age',

      component: Home

    }

路由编程式导航

this.$router.push()

嵌套路由


  {

    path: '/home',

    component: Home,

    children: [

      {

        path: '/home/recomment',

        component: Recomment

      }

    ]

  }

\

命名视图路由

{

path: '/',

components: {

default: Header,

main: Main,

footer: Footer

}

}


<router-view></router-view>

<router-view name="main"></router-view>

<router-view name="footer"></router-view>

路由进阶

  • beforeEach

  全局路由前置守卫

  router.beforeEach((to, from, next) => {});
  • afterEach()

  全局路由后置守卫

  • 路由独享守卫

  beforeEnter()

  • 组件内置守卫

  beforeRouteEnter(to,from,next) {

  }

完整的解析流程

  • 导航被触发
  • 在失活的组件里调用 beforeRouterLeave守卫
  • 调用全局的 beforeEach守卫
  • 在重用的组件里调用beforeRouterUpdate守卫
  • 在路由配置里调用beforeEnter
  • 解析异步路由的组件
  • 在激活的组件里调用beforeRouterEnter
  • 调用全局的beforeResolve
  • 导航被确认
  • 调用全局的afterEach
  • 触发dom更新
  • 调用 beforeRouteEnter守卫传给next的回调函数,创建好的组件实例会作为回调函数的参数传入

methods、watch、computed 有什么区别

  • methods：适合用于业务逻辑处理

  多次调用的时候不会缓存

  • watch：比较适合侦听单个数据，或者是路由

  可以侦听实例上的任意属性

  • computed：适合计算多个属性的结果

  可以缓存数据方便下次使用

watch 的两种用法

  • 浅层侦听
property(newVal,oldVal){}
  • 深度侦听

一般用来监听对象上的属性

 propertyName : {
      handler: function (val, oldVal) { /* ... */ },
      deep: true //使用深度监听
     immediate: true //立即监听
avatar
文章
阅读
粉丝