前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue2(四)动态组件 插槽 路由

Vue2(四)动态组件 插槽 路由

原创
作者头像
CodeGoat24
发布2022-02-10 17:05:03
1.5K0
发布2022-02-10 17:05:03
举报

上篇知识回顾:

  • 什么是Vue组件
  • Vue组件从创建到销毁会经历哪些阶段
  • Vue组件之间如何实现数据共享

本篇概要

  • 怎么使用动态组件
  • 如何使用插槽来为用户预留自定义内容?
  • vue-router在Vue框架下SPA项目的使用

一、动态组件

1. 什么是动态组件

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

2.动态组件的使用

示例:

代码语言:javascript
复制
<button @click="comName = 'Left'">展示 Left</button>
<button @click="comName = 'Right'">展示 Right</button>
<div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <keep-alive include="Right,Left">
        <component :is="comName"></component>
      </keep-alive>
</div>

import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'
export default {
  components: {
    // 如果在“声明组件”的时候,没有为组件指定 name 名称,则组件的名称默认就是“注册时候的名称”
    Left,
    Right
  },
  data() {
    return {
      // comName 表示要展示的组件的名字
      comName: 'Left'
    }
  }
}

(1) <component>标签

vue 的内置标签,只起到组件的占位符作用

(2)is 属性

is属性的值表示<component>位置,要渲染的组件名称

注意:组件名称应为在 components 节点下组件的注册名称

(3)<keep-alive> 标签

当<component>展示的组件A被隐藏,而要展示组件B时,通常会直接销毁组件A。下次展示组件A时,再重新创建。在组件A和B要频繁切换的情况,会造成一定的损耗。

这时,可以使用 keep-alive 标签,利用其 includeexclude 属性,对指定组件进行缓存,之后再使用就不用重新创建了。

- 标签会对 include 属性指定的组件进行缓存,而不是直接销毁

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

- 也可通过 exclude 属性指定哪些组件不需要被缓存

当组件被激活时,会自动触发组件的 activated 生命周期函数

注意:不要同时使用 include 和 exclude 这两个属性


二、插槽

1. 什么是插槽

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

可以把插槽认为是组件封装期间,为用户预留的内容的占位符,示例如下

代码语言:javascript
复制
<!-- Left组件 -->

<div class="left-container">
    <h3>Left 组件</h3>

    <!-- 声明一个插槽区域 -->
    <!-- vue 官方规定:每一个 slot 插槽,都要有一个 name 名称 -->
    <!-- 如果省略了 slot 的 name 属性,则有一个默认名称叫做 default -->
    <slot>
    <!-- 当用户没有为插槽指定内容时,会展示该插槽后备内容 -->
      <h6>这是 default 插槽的后备内容</h6>
    </slot>
  </div>

被指定了名称的插槽被称为:“具名插槽

在App.vue中调用Left组件,并为其中的插槽指定内容,示例如下:

代码语言:javascript
复制
    <div class="box" style="display: none;">
      <!-- 渲染 Left 组件 -->
      <Left>

        <template #default>
          <p>这是在 Left 组件的内容区域,声明的 p 标签</p>
        </template>
      </Left>
    </div>

默认情况下,在使用组件的时候,提供的内容都会默认被填充到组件内名称为 default 的插槽之中

如果要把内容填充到指定名称的插槽中,需要使用 v-slot: 这个指令,简写形式是 #

注意:

1. v-slot: 后面要跟上插槽的名字

2. v-slot: 指令不能直接用在元素身上,必须用在 template 标签

3. template 这个标签,它是一个虚拟的标签,只起到包裹性质的作用,但是,不会被渲染为任何实质性的 html 元素

当要使用的组件中有多个插槽时,在每个template标签属性,填写 #插槽名称 ,Vue框架就能template内的内容是放在哪个插槽内。

2. 作用域插槽

在封装组件的过程中,可以为预留的 <slot> 插槽绑定 props 数据

这种带有 props 数据的 <slot> 叫做“作用域插槽

示例代码如下

代码语言:javascript
复制
<h3 v-color="'red'">Article 组件</h3>

    <!-- 文章的内容 -->
    <div class="content-box">
      <!-- 在封装组件时,为预留的 <slot> 提供属性对应的值 -->
      <slot name="content" msg="hello vue.js" :user="userinfo"></slot>
    </div>

那么在父组件中,该如何获取绑定的props值呢?示例如下:

代码语言:javascript
复制
<Article>
  <template #content="scope">
     <p>{{ scope.msg }}</p>
     <p>{{ scope.user }}</p>
  </template>

<!-- 也可通过解构的方式,直接获取属性 #content="{{ msg, user }}" -->
</Article>

三、路由

1. 什么是路由

前端项目中,路由(英文:router)就是对应关系,Hash 地址与组件之间的对应关系

2. 工作原理

① 用户点击了页面上的路由链接 ② 导致了 URL 地址栏中的 Hash 值发生了变化 ③ 前端路由监听了到 Hash 地址的变化 ④ 前端路由把当前 Hash 地址对应的组件渲染都当前页面的指定位置

vue中路由的功能其实底层是用动态组件来实现的,只不过框架已经帮我们封装好了,方便我们直接使用

3. 单页面应用(SPA:single-page application)与前端路由

SPA 指的是一个 web 网站只有唯一的一个 HTML 页面,所有组件的展示与切换都在这唯一的一个页面内完成

此时,不同组件之间的切换需要通过前端路由来实现。

因此,在 SPA 项目中,不同功能之间的切换,要依赖于前端路由来完成

4. vue-router

1、概念:

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

2、 vue-router 安装和配置的步骤

① 安装 vue-router

代码语言:javascript
复制
npm i vue-router@3.5.2 -S

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

代码语言:javascript
复制
import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入需要的组件

// 把 VueRouter 安装为 Vue 项目的插件
Vue.use(VueRouter)

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

export default router

③ 在 src/main.js 入口文件中,导入并挂载路由模块

④ 在 src/App.vue 组件中,使用 vue-router 提供的 <router-link><router-view> 声明路由链接占位符

3、声明路由的匹配规则

常见用法:

(1)路由重定向

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

代码语言:javascript
复制
// 创建路由的实例对象
const router = new VueRouter({
 // routes 是一个数组,作用:定义 “hash 地址” 与 “组件” 之间的对应关系
  routes: [
    // 重定向的路由规则
    { path: '/', redirect: '/home' },
    // 路由规则
    { path: '/home', component: Home },
})

(2)动态路由匹配

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

代码语言:javascript
复制
// 需求:希望根据 id 的值,展示对应电影的详情信息
// 可以为路由规则开启 props 传参,从而方便的拿到动态参数的值
{ path: '/movie/:mid', component: Movie, props: true },

也可以在组件中使用 this.$route.params.mid获取值 但是使用props更简便

(3)嵌套路由

使用场景:

点击父级路由链接显示对应组件内容 组件内容中又有子级路由链接 ② 点击子级路由链接显示子级对应的组件内容

代码语言:javascript
复制
import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入需要的组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

import Tab1 from '@/components/tabs/Tab1.vue'
import Tab2 from '@/components/tabs/Tab2.vue'

Vue.use(VueRouter)

// 创建路由的实例对象
const router = new VueRouter({
 // routes 是一个数组,作用:定义 “hash 地址” 与 “组件” 之间的对应关系
  routes: [
{
      path: '/about',
      component: About,
      children: [
        // 子路由规则
        // 默认子路由:如果 children 数组中,某个路由规则的 path 值为空字符串,则这条路由规则,叫做“默认子路由”
        { path: '', component: Tab1 },
        { path: 'tab2', component: Tab2 }
      ]
    },
})

export default router

4、编程式导航 API

点击链接实现导航的方式,叫做声明式导航。例如:

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

调用 API 方法实现导航的方式,叫做编程式导航。例如:

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

而vue-router也提供了编程式导航的AIP

this.$router.push('hash 地址')

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

代码语言:javascript
复制
 this.$router.push('/home') 

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

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

代码语言:javascript
复制
this.$router.replace('/home') 

this.$router.go(数值 n)

⚫ 实现导航历史前进、后退

可以使用以下的API简化

$router.back() 在历史记录中,后退到上一个页面 $router.forward() 在历史记录中,前进到下一个页面


5、导航守卫

导航守卫可以控制路由的访问权限,起到拦截作用

例如:判断本地存储中是否存在token,若不存在,说明用户尚未登录,强制跳转到登录页面

在src/router/index.js文件中,编写以下代码即可

代码语言:javascript
复制
// 为 router 实例对象,声明全局前置导航守卫
// 只要发生了路由的跳转,必然会触发 beforeEach 指定的 function 回调函数
router.beforeEach(function(to, from, next) {
  // to 表示将要访问的路由的信息对象
  // from 表示将要离开的路由的信息对象
  // next() 函数表示放行的意思
  
  if (to.path === '/main') {
    // 要访问后台主页,需要判断是否有 token
    const token = localStorage.getItem('token')
    if (token) {
      next()
    } else {
      // 没有登录,强制跳转到登录页
      next('/login')
    }
  } else {
    next() //否则放行
  }
})

总结

前端路由是Vue框架实现SPA项目重要依赖,虽然知识点繁多,但是实际开发时,频繁用到的也就只是那几种办法。导航守卫又能实现对访问权限的控制,vue-router可以说是非常全面了。

而用好Vue的插槽有时也可以为开发带来很大的方便,比如:

组件A页面中使用了组件B,而组件B页面又使用了组件C,这时组件A和组件C就成了兄弟关系,那么想要实现组件A和C之间的数据共享,就只能使用EventBus中间件来实现。

但如果在组件B中放一个插槽,组件A在页面引用组件B时,只需要在组件B的标签内放入组件C到组件B的插槽中,这时,组件A和组件C也就成了父子关系,就能通过在组件C的标签属性中进行传值,相比使用EventBus,简化了很大一部分的代码。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 上篇知识回顾:
  • 本篇概要
  • 一、动态组件
  • 二、插槽
    • 2. 作用域插槽
    • 三、路由
      • 2. 工作原理
        • 3. 单页面应用(SPA:single-page application)与前端路由
          • 4. vue-router
            • 3、声明路由的匹配规则
              • 4、编程式导航 API
                • 5、导航守卫
                • 总结
                相关产品与服务
                消息队列 TDMQ
                消息队列 TDMQ (Tencent Distributed Message Queue)是腾讯基于 Apache Pulsar 自研的一个云原生消息中间件系列,其中包含兼容Pulsar、RabbitMQ、RocketMQ 等协议的消息队列子产品,得益于其底层计算与存储分离的架构,TDMQ 具备良好的弹性伸缩以及故障恢复能力。
                领券
                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档