使用component实现一个页面间切换

最新推荐文章于 2024-06-22 12:00:20 发布
最新推荐文章于 2024-06-22 12:00:20 发布
阅读量1.4k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41905935/article/details/80025182
版权
<!DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >Document </ title >
< script src= "./vue2.js" ></ script >
</ head >
< body >
< div id= "app" >
< home ></ home >
</ div >
< template id= "id" >
< div >
< a href= "javascript:void(0);" @ click= "componentId='login'" >登录 </ a >
< a href= "javascript:void(0);" @ click= "componentId='resign'" >注册 </ a >
< component : is= "componentId" ></ component >
</ div >
</ template >
</ body >
< script >
// 注册定义组件
Vue. component( "home",{
template: "#id",
data : function(){
return{
// 默认为login
componentId: "login"
}
},
components:{
// 子组件
'login' :{
template: "<div>登录</div>",
},
'resign' : {
template: "<div>注册</div>",
},
}
})
// 实例化vue对象（
new Vue({
el: '#app',
data:{
},
methods:{
}
})
< / script >
</ html >

<!-- component的缺点 -->
<!-- 1.不能进行传值
2.刷新之后会重置
3.只能在一个页面进行切换 -->
迷途明
关注
通过component标签加上is属性动态切换组件
郭宝的博客
07-03 4423
核心代码： <template> <div> ============================66、通过component标签加上is属性动态切换组件========================= <div> <el-button @click="switchComponent">切换组件</e...
h5 component:is属性的使用 配合实现滑动切换页面的效果（不是路由的形式）
weixin_45121510的博客
01-27 508
<template> <div class="page-home" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"> <!-- 头部 --> <nb-header :logo="logo" :hasMusic="active" ref="headerContainer"></nb-header> <!-- 改变的页面
Vue3中的动态组件，使用动态组件实现页面的切换。
一起学习
12-01 2110
本文主要介绍Vue3中的动态组件，使用动态组件实现页面的切换。
利用vue component组件实现不通过路由跳转页面
weixin_51747462的博客
03-27 806
利用vue component组件实现不通过路由跳转页面。
利用component实现组件的动态切换
qq_38797546的博客
03-29 1453
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="../js/vue.js"&gt
component组件如何实现页面切换 vue3搭配typescript
weixin_62355341的博客
04-10 2142
我这边是因为 登录 注册 注册信息完善三个页面背景图一样 所以想到了用component组件去做页面切换。 页面跳转逻辑是 登录跳转到注册 注册跳转到注册信息完善页面 这是我的layout页面 通过layoutPath变量的值改变去达到切换组件的目的 三个子组件通过子传父的方式调用方法clickChange去修改layoutPath的值 这里是很简单 但是用到了vue3+typescript 就不简单了 我先了解了一下vue3中 是通过setup 中的 context属性 context.
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
10-17
首先，文章强调了嵌套路由的概念，即在一个路由中可以嵌套使用另一个路由。这允许我们构建层级式的路由结构，让父视图可以展示通用的UI元素，而子视图则展示特定内容。这种方式能够使页面内容切换时，保持顶部菜单或...
C#WPF窗体在同一个位置实现不同页面切换
03-06
然后，我们可以在代码-behind或MVVM（Model-View-ViewModel）模式下动态改变Frame的`Source`，以实现页面切换。例如： ```xml xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x=...
使用vue-router切换页面时实现设置过渡动画
10-16
这篇文章将详细讲解如何在vue-router中实现页面切换的过渡动画。 首先，我们需要理解vue-router的基本概念。Vue Router是Vue.js官方的路由管理器，它让我们能够根据URL来动态地渲染视图。在配置路由时，我们可以...
详解使用vue实现tab 切换操作
08-30
在前端开发中，Tab 切换是一个常见的交互操作，使用 Vue 实现 Tab 切换操作可以使得界面更加灵活和交互性强。下面将介绍使用 Vue 实现 Tab 切换操作的三种思路，並对每种思路进行详细说明。 思路一：切换 Content ...
jetpack compose 在两个页面间切换
heeheeai的博客
06-22 1220
定义两个简单的Composable函数，分别代表两个页面。
vue --- > 使用component的 :is属性切换标签页
热门推荐
栗子好好吃的博客
09-03 1万+
点击对应的标签,下面切换至对应的模板… // 说明 <component :is="name"></component> // 相当于把id为name的组件放到对应的位置 总体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...
vue --- ＞ 使用component的 :is属性切换标签页
qq_48772601的博客
01-26 1300
// 说明 <component :is="name"></component> // 相当于把id为name的组件放到对应的位置 name是注册组件的名字
功能组件和组件跳转区别
一片涟漪
07-02 236
功能组件 功能组件 ： 在页面中只是实现一个效果功能（样式···） 所以不用给路由 直接在需要这个功能的页面中引入就行了 最好创建一个components文件夹 把功能组件和共用组件区别开 //在template中套一个标签 <组件名> import 组件名 from "/路径/组件名" //再在components里声明组件名 components：{ 组件名 } 组件跳转 跳转通过path来实现 需要在index.js 给路由 这就属于一个单独的组件 不用引入 ..
component实现组件切换
LRQQHM的博客
04-22 409
如果要实现两个组件之间的切换 <component :is<组件名称>></component> <template> <div> <div v-for="(item, index) in componentList" :key="index"> <div @click="componentChange(item.name)"></div> </div> &lt
39. Vue组件切换-使用component元素实现组件切换
DevOps海洋的渔夫@专栏
06-30 2593
需求 上一篇章使用v-if和v-else结合一个flag属性值来控制组件之间的切换。本章节使用components元素来更加直接的切换组件。 使用示例如下： <!-- Vue提供了 component ,来展示对应名称的组件 --> <!-- component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称 --> <component :is="co...
动态组件实现tab栏切换
时漂亮的博客
10-29 757
动态组件:在同一个挂载点,可以切换使用不同的插件 实现动态组件的步骤: 1.准备两个被切换的组件:username.vue和userinfo.vue // username.vue <template> <div> 用户名:<input type="text" /> <br /> 密&emsp;码:<input type="password" /> </div> </template>
Vue学习-动态组件
qq_57047040的博客
03-09 405
作用： 实现组件的动态切换，加载组件。如：实现页面的转换效果 本节主要使用一个按钮来实现两个页面的跳转，来讲解Vue内置的component组件的用法。 component语法: <component :is="要加载的组件名称"></component> 演示如何动态加载组件 在.vue文件中 < template > 中书写组件的模板，在 < script >标签中书写要用到的JavaScript代码。 描述： 点击按钮可以实现组件的替换。 Compon
Vue通过components引入另一个页面作为模态框
Gs2684036512的博客
04-14 799
Vue通过components引入另一个页面作为模态框的带参和不带参的两种方式
使用VueRouter实现tab页面切换
最新发布
10-26
在Vue.js中，使用Vue Router实现Tab页面切换通常涉及到以下几个步骤： 1. 安装和引入Vue Router：首先需要安装Vue Router，通过npm或yarn命令添加到项目依赖中，然后在入口文件（如main.js）中导入并创建实例。 ```bash npm install vue-router ``` ```javascript import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); ``` 2. 创建路由配置：定义每个Tab对应的组件路径和名称，以及它们之间的关系。例如，如果你有三个Tab页（首页、详情页和设置页），可以这样配置： ```javascript const routes = [ { path: '/home', name: 'Home', component: HomeComponent, }, { path: '/details', name: 'Details', component: DetailsComponent, }, { path: '/settings', name: 'Settings', component: SettingsComponent, } ]; ``` 3. 设置默认路由：在Vue Router的实例初始化时，你可以指定初始加载的页面。 ```javascript const router = new Router({ routes, mode: 'history' // 如果你的应用部署在支持HTML5 History API的环境中 }); router.push('/home'); // 默认打开首页 ``` 4. 在Vue组件中使用导航守卫：可以使用`beforeRouteEnter`或`beforeRouteUpdate`等导航守卫，在切换Tab之前或之后执行一些操作，比如数据预加载。 5. 使用Vue组件内的导航链接：在各个组件的模板中，使用`router-link`标签来导航到其他路由： ```html <router-link :to="{name: 'Home'}">首页</router-link> ``` 6. Tab切换的UI逻辑：你可以使用Vue的响应式特性来监听当前路由的变化，当路由改变时更新对应的组件内容显示。 使用上述方法，用户就可以通过点击Tab按钮在不同的页面之间平滑切换了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值