VUE（四）

动态组件

什么是动态组件

动态组件指的是动态切换组件的显示与隐藏

如何实现动态组件渲染

vue提供了一个内置的<component>组件，专门用来实现动态组件的渲染。示例diamante如下：

data(){
    return{
        // 当前要渲染的组件名称
        comName:'Left'
    }
}

<!-- 通过 is 属性，动态指定要渲染的组件 -->
<component :is="comName"></component>

<!-- 点击按钮，动态切换组件名称 -->
<button @click="comName = 'Left'"展示 Left 组件</button>
<button @click="comName = 'Right'"展示 Left 组件</button>

使用 keep-alive 保持状态

默认情况下，切换动态组件时无法保持组件的状态。此时可以使用vue内置的<keep-alive>组件保持动态组件的状态。示例代码如下：

<keep-alive>
    <component is="comName"></component>
</keep-alive>

keep-alive 对应的生命周期函数

当组件被缓存时，会自动触发组件的 deactivated 生命周期函数。
当组件被激活时，会自动触发 activated 生命周期函数。

keep-alive 的 include 属性

include 属性用来指定：只有名称匹配的组件mark>会被缓存。多个组件名之间使用英文的逗号分隔：

<keep-alive include="MyLeft,MyRight">
    <component :is="comName"></component>
</keep-alive>

插槽

插槽(Slot)是vue为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望用户指定的部分定义为插槽。

自定义指令

vue官方提供了v-text、v-for、v-model、v-if等常用的指令。初次之外vue还允许开发者自定义指令。

自定义指令的分类

vue中的自定义指令分为两类，分别是：

私有自定义指令
全局自定义指令

私有自定义指令

在每个vue组件中，可以在directives节点下声明私有自定义指令。示例代码如下：

directives:{
    color:{
        bind(el){
            el.style.color = 'red'
        }
    }
}

update 函数

bind 函数只调用1次：当指令第一次绑定到元素时调用，当DOM更新时bind函数不会被触发。update 函数会在每次DOM更新是被调用。示例代码如下：

directives:{
    color:{
        // 当指令第一次被绑定到元素时被调用
        bind(el,binding){
            el.style.color = binding.value
        }，
        update(el,binding){
            el.style.color = binding.value
        }
    }
}

函数简写

如果 bind 和 update 函数中的逻辑完全相同，则对象格式的自定义指令可以简写成函数格式：

directives:{
    // 在 inset 和 update 时，会触发相同的业务逻辑
    color(el,binding){
        el.style.color = binding.value
    }
}

全局自定义指令

全局共享的自定义指令需要通过 "Vue.directive()" 进行声明，示例代码如下：

// 参数1：字符串，表示全局自定义指令的名字
// 参数2：对象，用来接收指令的参数值
Vue.directive('color',function(){
    el.style.color = binding.value
})

前端路由的概念与原理

SPA与前端路由

SPA指的是一个web网站只有唯一的一个HTML页面，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不同组件之间的切换需要通过前端路由来实现。
结论：在SPA项目中，不同功能之间的切换，要依赖于前端路由来完成！

什么是前端路由

通俗易懂的概念：Hash地址与组件之间的对应关系。

前端路由的工作方式

用户点击了页面上的路由连接
导致了URL地址栏中的Hash值发生了变化
前端路由监听到了Hash地址的变化
前端路由把当前的Hash地址对应的组件渲染到浏览器中

vue-router 基本用法

什么是 vue-router

vue-router 是vue.js官方给出的路由解决方案。它只能结合vue项目进行使用，能够轻松地管理SPA项目中组件的切换。

vue-router 的官方文档地址：https://router.vuejs.org/zh/

vue-router 安装和配置的步骤

安装 vue-router 包
创建路由模块
导入并挂载路由模块
声明路由链接和占位符

在项目中安装vue-router
在 vue2 的项目中，安装 vue-router 的命令如下：

npm i vue-router@3.5.2 -S

创建路由模块

在src 源代码目录下，新建 router/index.js 路由模块，并初始化如下的代码：

// 1. 导入vue和 VueRouter 的包
import Vue from 'Vue'
import VueRouter from 'vue-router'

// 调用 Vue.use() 函数。把VueRouter 安装为 Vue 的插件
Vue.use(VueRouter)

// 创建路由的实例对象
const router = new VueRouter()

// 4.向外共享路由的实例对象
export default router

路由重定向

路由重定向指的是：用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面。
通过路由规则的redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：

const router = new VueRouter({
  routes:[
    { path: '/',redirect:'/home'},
    { path: 'home',component: Home },
    { path: '/movie', component: Movie},
    { path: '/about', component: About}
  ]
})

嵌套路由

通过路由实现组件的嵌套展示，叫做嵌套路由。

模板内容中又有子级路由链接
点击子级路由链接显示子级模板内容

通过 children 属性声明子路由规则

在 src/router/index.js 路由模块中，导入需要的组件，并使用children属性声明子路由规则：

const router = new VueRouter({
  routes:[{
    path:'/about',
    component:About,
    children:[
      { path: 'tab1', component: Tab1 },
      { path: 'tab2', component: Tab2 }
    ]
  }]
})

动态路由的概念

动态路由指的是：把Hash地址中可变的部分定义为参数项，从而提高路由规则的复用性。在 vue-router 中使用英文冒号(:)来定义路由的参数项。示例代码如下：

// 路由中的动态参数以 : 进行声明，冒号后面的是动态参数的名称
{ path: '/movie/:id', component:Movie }

获取路由参数项：

var id = this.$router.params.id

声明式导航&编程式导航

在普通浏览器中，点击链接实现导航的方式，叫做声明式导航。例如：

普通网页中点击<a>链接、vue项目中点击<router-link> 都属于声明式导航

在浏览器中，调用API方法实现导航的方式，叫做编程式导航。例如：

普通网页中调用 location.href 跳转到新页面的方式，属于编程式导航。

vue-router 中的编程式导航API

vue-router 提供了许多编程式导航的API，其中最常见的导航API分别是：
① this.$router.push('hash地址')

跳转到指定hash地址，并增加一条历史记录

② this.$router.replace('hash地址')

跳转到指定的hash地址，并替换掉当前历史记录

③ this.$router.go('数值 n')

指定跳转历史记录的次数，整数代表前进，负数代表后退，如果超过上限，则原地不动
但在实际开发中，一般只会前进或后退一层页面。因此vue-router 提供了如下两个便捷方法：
- $router.back()
- $router.forward()

导航守卫

导航守卫可以控制路由的访问权限。示意图如下：

全局前置守卫

每次发生路由的导航跳转时，都会触发全局前置守卫。因此在全局前置守卫中，程序员可以对每个路由进行访问权限的控制：

// 创建路由实例对象
const router = new VueRouter({ ... })

// 调用路由实例对象的 beforeEach 方法，即可声明“全局前置守卫”
// 每次发生路由导航跳转的时候，都会自动触发 fn 这个“回调函数”
router.beforeEach(fn)

守卫方法的3个形参

全局前置守卫的回调函数中接收3个形参，格式为：

// 创建路由实例对象
const router = new VueRouter({ ... })

// 全局前置守卫
router.beforeEach((to,from,next) => {
  // to 是将要访问的路由的信息对象
  // from 是将要离开的路由的信息对象
  // next 是一个函数，调用next() 表示放行，允许这次路由导航
})

posted @ 2022-06-08 15:41 maplerain 阅读(43) 评论(0) 收藏举报

刷新页面返回顶部

Maplerain