Vue(七)SPA 单页面及应用方式「建议收藏」

Vue(七)SPA 单页面及应用方式「建议收藏」vue:单页面应用SPA。

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

目录

SPA(Single Page Application) 单页面应用 

1. 单页面应用与多页面应用对比

2. 单页面应用步骤

3. SPA路由跳转


SPA(Single Page Application) 单页面应用 

        单页面是指整个应用程序只有一个唯一完整的 HTML 页面,而其它所谓的页面,其实都是组件片段而已,切换页面也只是切换一个 HTML 中显示不同的组件片段。在今后所有的开发项目都是单页面应用。

1. 单页面应用与多页面应用对比

多页面应用

单页面应用

请求次数

每切换一次页面,都向服务器端重新发送请求;反复切换页面就会反复发送请求,请求次数多。

在首次加载时,就将唯一完整的HTML页面和所有其余页面组件一起下载下来,即使反复切换页面也不需要反复向服务器发送请求,请求次数绝对少。

公共资源

每次切换页面,都要重新请求页面中的bootstrap.cssjquery.jsbootstrap.js等多个页面都要用到的资源,请求次数多加载慢。

每次切换页面时,唯一完整的HTML外壳没有切换,所以不会重复发送请求,下载cssjs文件,请求次数又少了很多,同时加载效率高。

加载效率

每次切换页面,都要删除旧的整棵DOM树,重建整棵DOM树,效率低。

每次切换页面时,因为只跟换部分组件片段显示,整个页面没有更换,DOM树也只更换部分节点,不用重建整棵DOM树,效率高。

页面切换动画

几乎不可能实现页面切换动画,因为页面切换需要同时看到前一个页面的后一半以及后一个页面的前一半;多页面应用不可能两个页面同时存在,所以无法实现。

比较容易实现页面切换动画,因为单页面应用的所有页面组件已经同时保存在客户端了,同时显示也是有可能的。

2. 单页面应用步骤

(1)先创建唯一完整的 HTML 页面(一个支持 vue 基本结构的空页面)

<script src="js/vue.js">

<body>
  <div id="app">

  </div>
  <script>
    new Vue({
      el: "#app",
    })
  </script>
</body>

(2)创建所有”页面”组件文件

        a. 项目中,有几个”页面”,就要创建几个页面组件文件;

        b. 所有页面组件都要集中放在一个名为 views 的文件夹中;

        c. 每个页面组件其实都是一个子组件;

        d. 在唯一完整的 HTML 页面顶部引入页面组件;

        e. 创建 404 页面组件,在唯一完整的 HTML 页面顶部引入,加入到路由字典中最后一项:

{ path:"*", component:NotFound }
//其中“*”表示除正确输入之外的所有情况

(3)创建路由器对象

        a. 在唯一完整的 HTML 页面顶部引入 vue-router.js(官方);

        b. 创建路由器对象。先将路由器对象保存在 router/index.js 文件中;然后先创建路由字典,再创建路由器对象;

//创建路由器字典
var routes=[
   {path:"/相对路径", component:页面组件对象名},
   ...
 ]

//创建路由器对象
var router=new VueRouter({ routes })

        c. 引入到唯一完整的 HTML 页面中;

<script src=“router/index.js”>

        d. 将 router 对象加入到 new Vue() 中,这样 router 对象才可以修改页面中的内容;

new Vue({
   el:"#app",
   router
 })

        e. 在唯一完整的 HTML 页面中 <div id=”app”> 内,添加 <router-view></router-view> 标签,用于为将来的页面组件占位。 

补充:路由器对象的三大功能(高频笔试面试)

        监视地址栏变化;

        查找当前路径对应的页面组件;

        将找到的页面组件替换到<router-view>的位置。

(4)创建除页面以外的其它全局组件或子组件(如页头)

        a. 所有不足以成为一个页面的组件片段都要集中创建在 components 文件夹中;

        b. 所有的组件,暂时都创建为子组件,且都要在唯一完整的 HTML 页面中引入;

        c. 如果是全局组件,只要在 new Vue() 之前,使用 Vue.component() 将子组件对象转为全局组件即可。

Vue.component("组件标签名", 组件对象名);

        如果所有页面都需要显示页头,则只要在 <router-view> 上方添加 <页头组件> 标签即可;如果有的页面有页头,有的页面不需要页头,就只在那些需要页头的组件中添加 <页头组件>。

一个完整的单页面应用文件结构如下:

Vue(七)SPA 单页面及应用方式「建议收藏」

3. SPA路由跳转

(1)在 HTML 中写死的跳转连接

<router-link to="/相对路径">文本</router-link>

        <router-link to=”/xxx”</router-link> 会被翻译为 <a href=”xxx”></a>,翻译过程中 vue 会对 a 做一些自动的加工。

(2)在程序中自动跳转

 this.$router.push("/相对路径")

(3)路由跳转传参

        a. 配置路由字典中的路由字典项;

{ path:"/相对路径/:变量名", component: 页面组件对象名, props:true}

//:变量名 表示为上个页面传到下个页面的值起一个变量名,便于重复使用
//props:true 让地址栏中的上个页面传来的值,自动掉入下一个页面的props中成为一个外来属性/变量

        b. 跳转时携带参数值到下个页面;

<router-link to="/相对路径/参数值">
//或者
this.$router.push("/相对路径/参数值")

//路由传参,在路由字典项的path中定义变量时必须加:
//但在跳转时传参时既不用加:也不用加变量名,写参数值即可

        c. 在下个页面中直接使用 props 中外部传来的变量。

props:[ "变量名" ]

        如下:
Vue(七)SPA 单页面及应用方式「建议收藏」


举例:实现单页面应用(以上述文件结构为基础);

        index.html

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
  <script src="js/vue-router.js"></script>
  <script src="views/Detail.js"></script>
  <script src="views/Index.js"></script>
  <script src="views/NotFound.js"></script>
  <script src="router/index.js"></script>
  <script src="components/MyHeader.js"></script>
</head>
<style>
  .router-link-exact-active {
    background-color: rgb(78, 75, 75);
    width: 50px;
    padding: 5px;
    border-radius: 5px;
    color: white;
    text-decoration: none;
  }
</style>

<body>
  <div id="app">
    <!--为所有页面添加页头-->
    <!-- <my-header></my-header> -->
    <router-view></router-view>
  </div>
  <script>
    //将普通子组件MyHeader转为全局组件
    Vue.component("my-header", MyHeader);

    new Vue({
      el: "#app",
      router
    })
  </script>
</body>
</html>

        views/Index.js

var Index = {
  template: `
    <div>
      <my-header></my-header>
      <h1 style="color:red">这里是首页</h1>
      <button @click="goto(1)">查看1号商品详情</button>
      <button @click="goto(5)">查看5号商品详情</button>
      <button @click="goto(13)">查看13号商品详情</button>
    </div>
  `,
  methods: {
    goto(lid) {
      // 程序中自动跳转
      this.$router.push(`/detail/${lid}`)
    }
  }

}

        views/Detail.js

var Detail = {
  props: ["lid"],
  template: `
    <div>
      <my-header></my-header>
      <h1 style="color:blue">这里是详情页</h1>
      <h2>显示{
  
  {lid}}商品的详细信息...</h2>
    </div>
  `
}

        views/NotFound.js

var NotFound = {
  template: `
  <div>
    <h2 style="color:yellow">404:嘿!走到哪儿了!</h2>
  </div>
  `
}

        router/index.js

var routes = [{
    path: "/", //用户运行后直接进入首页
    component: Index
  },
  {
    path: "/detail/:lid",
    component: Detail,
    props: true
  },
  {
    path: "*", //除输入正确之外的所有情况
    component: NotFound
  }
];
var router = new VueRouter({
  routes
});

        components/MyHeader.js

var MyHeader = {
  template: `<div>
    <h1 style="color:orange">这里是页头</h1>
    <ul>
      <li><router-link to="/">首页</router-link></li>
      <li><router-link to="/details">详情页</router-link></li>
    </ul>
    <hr>
  </div>`
}

效果如下:

        在首页时,首页高亮显示;

Vue(七)SPA 单页面及应用方式「建议收藏」

        点击第一个按钮; 

Vue(七)SPA 单页面及应用方式「建议收藏」

        404界面;

Vue(七)SPA 单页面及应用方式「建议收藏」

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/182563.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 级联下拉菜单的实现「建议收藏」

    级联下拉菜单的实现「建议收藏」级联下拉菜单的实现

  • RelativeLayout.LayoutParams

    RelativeLayout.LayoutParams通过id设置相对兄弟元素对齐。<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android&qu

  • hexo博客主题推荐_wordpress社交主题

    hexo博客主题推荐_wordpress社交主题crystalBlog上篇hexo博客搭建及主题优化(一)主题优化二21.网站log设置主题目录下的_config.yml配置文件中:#配置网站favicon和网站LOGO##本地#favicon:/favicon.png#logo:/medias/logo.png#此处我用的CDN,也可以使用本地文件favicon:https://cdn.jsdelivr.net/gh/guixinchn/image/blog/favicon.pnglogo:https://cdn

  • RxJava 操作符flatmap

    RxJava 操作符flatmap有如下场景:在前段调用后端的API时,经常会出现回调嵌套的情况。假设我们有两个API,queryA和queryB.并且queryB的运行依赖于queryA的结果。那么我们的程序在一般的情况下可能是这个样子。想象有如下的代码:是不是感觉非常不舒服?假如嵌套的API再多几层,那么这将是个灾难。一个人开发的时候可能不觉得有什么问题,但是可以想象做codereview或者新入项目组的同事

  • hadoop 面试题收集及个人答案整理

    hadoop 面试题收集及个人答案整理1、简要描述如何安装配置一个apache开源版hadoop,描述即可,列出步骤更好      –解压hadoop包,到指定安装文件夹      –配置linux基本网络环境、jdk环境、防火墙环境      –修改主机名,方便后面UI的访问      –修改hadoop/etc/hadoop/conf下的配置文件,根据部署的模式和需要进行配置      –格式化nam…

  • 计算机快捷键任务管理器,打开电脑任务管理器快捷键是什么

    计算机快捷键任务管理器,打开电脑任务管理器快捷键是什么电脑使用很广泛,很多时候在使用电脑的过程中都会用到任务管理器,学习啦小编整理的本文为大家讲解打开电脑任务管理器快捷键是什么,一起来了解吧。打开电脑任务管理器快捷键是什么设备管理器是Windows操作系统提供的对计算机硬件进行管理的一个图形化工具。一般我们可通过设备管理器查看计算机硬件的配置信息,获取相关硬件的驱动程序信息以及进行更新、禁用、停用或启用相关设备等。打开电脑任务管理器快捷键:Ctrl+…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号