【 使用路由建立多视图单页应用详细介绍】

使用路由建立多视图单页应用详细介绍

  • 1. 多视图
    • 1.1 引入依赖库
    • 1.2 创建自定义组件
  • 2. React(使用React Router)
  • 3. Angular(使用Angular Router)
  • 4. Vue(使用Vue Router)

1. 多视图

构建多视图的单页应用程序(Single Page Application,简称SPA)通常会使用前端路由来实现,前端路由允许在不重新加载整个页面的情况下动态地加载不同的视图内容,这可以通过各种前端框架(如ReactAngularVue等)中的路由库来实现,下面,我将介绍如何在这些流行框架中使用路由来构建一个多视图SPA

1.1 引入依赖库

建立一个基本html项目,创建一个demo页面并引入一下js库文件

<script src="js/vue.js"></script>
<script src="js/vue-router.min.js"></script>

1.2 创建自定义组件

创建vue组件有两种方式:

  • var MyComonent = Vue.component(“button-counter”, {…});
    创建一个vue组件并赋给MyComponent变量
  • const Home = Vue.extend({});
    extend是构造一个组件的语法器. 你给它参数,他给你一个组件,然后这个组件你可以作用到Vue.component这个全局注册方法里,也可以在任意vue模板里使用

创建一个Home组件和About组件

//组件名用PPascalCase风格
const Home = Vue.extend({//必须定义一个根元素作为容器,包裹模板中的内容元素template: '<div><h1>Home组件</h1><div>Home组件内容区</div></div>'
});const About = Vue.extend({//必须定义一个根元素作为容器,包裹模板中的内容元素template: '<div><h1>About组件</h1><div>About组件内容区</div></div>'
});

2. React(使用React Router)

React RouterReact中一个非常流行的路由库。

  1. 初始化项目和安装依赖

    npx create-react-app my-spa
    cd my-spa
    npm install react-router-dom
    
  2. 设置路由

    src目录中创建几个组件文件,例如Home.js, About.js, Contact.js,分别代表不同的视图。

    App.js中设置路由。

    import React from 'react';
    import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
    import Home from './Home';
    import About from './About';
    import Contact from './Contact';function App() {return (<Router><nav><ul><li><Link to="/">Home</Link></li><li><Link to="/about">About</Link></li><li><Link to="/contact">Contact</Link></li></ul></nav><Switch><Route exact path="/" component={Home} /><Route path="/about" component={About} /><Route path="/contact" component={Contact} /></Switch></Router>);
    }export default App;
    

    当用户点击不同的链接时,<Router> 会匹配 <Route> 规则来动态加载对应组件。

  3. 创建视图组件

    在每个组件文件中定义不同的视图。

  4. 运行应用

    npm start
    

3. Angular(使用Angular Router)

在Angular中,有一个内建的路由库可以使用。

  1. 创建Angular应用

    ng new my-spa
    cd my-spa
    
  2. 设置路由

    app-routing.module.ts中配置路由。

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { HomeComponent } from './home/home.component';
    import { AboutComponent } from './about/about.component';
    import { ContactComponent } from './contact/contact.component';const routes: Routes = [{ path: '', component: HomeComponent },{ path: 'about', component: AboutComponent },{ path: 'contact', component: ContactComponent },
    ];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
    })
    export class AppRoutingModule { }
    
  3. 创建视图组件

    使用Angular CLI来生成新组件。

    ng generate component home
    ng generate component about
    ng generate component contact
    
  4. 使用 <router-outlet>

    app.component.html中,使用 <router-outlet> 作为视图的占位符。

  5. 运行应用

    ng serve
    

4. Vue(使用Vue Router)

Vue Router是Vue的官方路由管理器。

  1. 创建Vue应用

    vue create my-spa
    cd my-spa
    vue add router
    
  2. 设置路由

    src/router/index.js文件中配置路由。

    import Vue from 'vue'
    import Router from 'vue-router'
    import Home from '../views/Home.vue'
    import About from '../views/About.vue'
    import Contact from '../views/Contact.vue'Vue.use(Router)const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About},{path: '/contact',name: 'Contact',component: Contact}
    ]const router = new Router({routes
    })export default router;
    
  3. 创建视图组件

    views目录中创建对应的组件文件。

  4. 使用 <router-view>

    App.vue文件中,使用 <router-view> 作为视图的占位符。

  5. 运行应用

    npm run serve
    

以上是使用三种不同框架构建多视图SPA的基本介绍,具体的代码实现和配置可能会根据框架版本和个人项目需求有所不同。这只是一个快速概览,实际开发过程中可能还需要考虑更多细节,如路由守卫、路由懒加载、嵌套路由等高级功能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/636487.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构学习之顺序表(各种操作合集)

顺序表&#xff08;各种操作合集&#xff09; 顺序表的两种创建方式&#xff1a; 方式1&#xff1a;根据函数的返回值创建 通过返回值返回所申请的内存空间的首地址&#xff1b;示例代码&#xff1a; list_t *create_seq_list_1(){list_t *p (list_t *)malloc(sizeof(list…

009 Linux_文件系统 | 软硬链接

前言 本文将会向你介绍文件系统与软硬链接 文章重点 本文将会先向你介绍文件是如何在磁盘上进行管理的&#xff0c;关于文件的管理将会从管理属性和管理内容两方面来谈&#xff0c;最后会向你介绍软硬链接的概念 文件在磁盘中的管理 首先&#xff0c;假设一个磁盘200GB&#…

大健康中医领域的客户画像标签数据(一)

大健康中医领域的客户画像标签数据 目前国内市场上针对大健康领域的客户数据如何收集&#xff0c;如何系统分析客户在大健康中医领域的一体化链路数据。 分步骤 1&#xff0c;健康领域的客户标签 基础标签: - 年龄:老年、中年、青年 - 性别:男性、女性 - 客户类型:个人、医…

Linux中的共享内存

定义&#xff1a; 共享内存允许两个或者多个进程共享物理内存的同一块区域&#xff08;通常被称为段&#xff09;。由于一个共享内存段会称为一个进程用户空间的一部分&#xff0c;因此这种 IPC 机制无需内核介入。所有需要做的就是让一个进程将数 据复制进共享内存中&#xff…

acwing讲解篇之94. 递归实现排列型枚举

文章目录 题目描述题解思路题解代码 题目描述 题解思路 定义递归深度deep&#xff0c;数字使用情况used&#xff0c;选择的数字顺序path 进行递归 终止条件为递归深度达到n层时&#xff0c;打印path&#xff0c;然后返回 深度加一 遍历未使用的数字&#xff0c;选择数字&am…

【rust/bevy】使用points构造ConvexMesh

目录 说在前面问题提出Rapier具体实现参考 说在前面 操作系统&#xff1a;win11rust版本&#xff1a;rustc 1.77.0-nightlybevy版本&#xff1a;0.12 问题提出 在three.js中&#xff0c;可以通过使用ConvexGeometry从给定的三维点集合生成凸包(Convex Hull) import { ConvexGeo…

【51单片机Keil+Proteus8.9】温室盆栽灌溉系统

实验五 实验名称 温室盆栽灌溉系统 软件设计&#xff1a; 1. 定义对应的引脚和端口的别名。 2. 编写延时函数&#xff0c;用于控制程序的执行速度。 3. 编写LCD控制函数&#xff0c;包括发送命令和发送数据两种操作。 4. 编写显示函数&#xff0c;用于在LCD上显示字符串…

无人机打击激光器

激光器的应用非常广泛&#xff0c;涵盖了多个领域。以下是一些主要的激光器应用&#xff1a; 医疗领域&#xff1a;激光器在医疗行业中有着重要应用&#xff0c;比如用于激光手术&#xff08;如眼科手术&#xff09;、皮肤治疗、牙科治疗、肿瘤治疗等。 工业制造&#xff1a;在…

html form中的input有哪些类型?各是做什么处理使用的

在HTML表单中&#xff0c;input元素有多种类型&#xff0c;主要包括以下几种&#xff1a; button&#xff1a;用于定义可点击的按钮。 checkbox&#xff1a;用于定义复选框&#xff0c;用户可以选择多个选项。 file&#xff1a;用于定义文件输入字段&#xff0c;用户可以从本地…

无忧秘书智脑:轻松驾驭“看图说话”功能,职场沟通更高效

在现代职场中&#xff0c;有效的沟通是提升工作效率的关键。然而&#xff0c;有时候我们面对一张图片或图表&#xff0c;却难以用言语准确表达其中的信息。这时&#xff0c;无忧秘书智脑的“看图说话”功能就派上了用场。这篇文章将手把手教你如何使用这一功能&#xff0c;以及…

在使用go语言开发的时候,程序启动后如何获取程序pid

在Go语言中&#xff0c;标准库并没有直接提供获取进程ID&#xff08;PID&#xff09;的函数。通常&#xff0c;你可以使用os包和syscall包来调用底层的操作系统函数来获取PID。 以下是一个获取程序PID的示例代码&#xff1a; package mainimport ("fmt""os&qu…

【MATLAB源码-第119期】基于matlab的GMSK系统1bit差分解调误码率曲线仿真,输出各个节点的波形以及功率谱。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 GMSK&#xff08;高斯最小频移键控&#xff09;是一种数字调制技术&#xff0c;广泛应用于移动通信&#xff0c;例如GSM网络。它是一种连续相位调频制式&#xff0c;通过改变载波的相位来传输数据。GMSK的关键特点是其频谱的…

springboot(ssm仓库管理系统 wms出入库管理系统Java系统

springboot(ssm仓库管理系统 wms出入库管理系统Java系统 开发语言&#xff1a;Java 框架&#xff1a;ssm/springboot vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7&#xff08;或8.0&#xff09; 数…

Nginx安装配置

目录 准备工作 安装Nginx及相关组件 a、yum安装: b、tar安装: c、也可以yum安装pcre、zlib、openssl&#xff0c;tar安装nginx 启动Nginx 简单配置Nginx Nginx配置静态web服务器 Nginx实现负载均衡(不要使用刷新按钮,在地址栏回车) 1.负载均衡策略 2.配置Nginx的负载均衡与分发…

使用 Zabbix + Grafana 搭建服务器监控系统

搭建 Linux 服务器监控的目的是自己有一台阿里云服务器内存是 2g 的 , 多开一些软件就会把内存和 CPU 使用率弄的很高&#xff0c;最终导致服务器卡死。 所以基于这个痛点&#xff0c;想知道当前的 CPU 和内存是多少。阿里云 ECS 控制台中也提供对服务器的监控 , 但是为了学习…

TypeScript 函数教程 - 深入理解和使用 TypeScript

🚀 欢迎来到我的专栏!专注于Vue3的实战总结和开发实践分享,让你轻松驾驭Vue3的奇妙世界! 🌈✨在这里,我将为你呈现最新的Vue3技术趋势,分享独家实用教程,并为你解析开发中的难题。让我们一起深入Vue3的魅力,助力你成为Vue大师! 👨‍💻💡不再徘徊,快来关注…

文字的baseLine算法

使用canvas的drawText方法时候&#xff0c;除了要传入画笔和text还需要传入一个x坐标和y坐标。这边的x和y坐标是Baseline的坐标。 public void drawText(NonNull String text, float x, float y, NonNull Paint paint) {super.drawText(text, x, y, paint);} top:是 baseLine到…

mysql B+树索引

数据库索引用于提高查询性能和数据访问效率。索引可以加速数据的查找和筛选&#xff0c;减少查询的时间复杂度。数据库索引有很多类型&#xff0c;这里不展开也不比较&#xff0c;只介绍最常见一种索引结构B树索引。mysql中InnoDB引擎默认使用的就是BTREE索引。 B树数据结构 …

ubuntu设置每天定时关机

ubuntu设置每天定时关机 终端输入命令&#xff1a; sudo crontab -e输入密码&#xff0c;回车。 我这里使用nano作为编辑器&#xff0c;你可以选择vim。 在末尾输入以下命令&#xff1a; 59 23 * * * sudo -u root shutdown now设置&#xff1a;每天23:59分&#xff0c;电脑…

GitHub图床TyporaPicGo相关配置

本文作者&#xff1a; slience_me 文章目录 GitHub图床&Typora&PicGo相关配置1. Github配置2. picGo配置3. Typora配置 GitHub图床&Typora&PicGo相关配置 关于Typora旧版的百度网盘下载路径 链接&#xff1a;https://pan.baidu.com/s/12mq-dMqWnRRoreGo4MTbKg?…