vue-SPA-单页面应用程序项目-设置#锚点

vue-SPA-介绍和优缺点

• 概念定义：SPA英文全称是Single Page Application, 中文翻译是 “单页面应用程序项目”
• 通俗的理解是：一个网站只有一个Web页面；网站的所有功能都在这个唯一的页面上进行展示与使用

好处：

• 实现了前后端分离开发，各司其职；提高了开发效率；
• 用户体验好，页面部分内容发生变化只需要更新局部即可(非刷新整个页面)；

缺点：

• 对SEO(搜索引擎)不是很友好，网站从开始到结束始终访问一个程序文件，造成搜索引擎不给检索， 但是有解决方案，再者后台系统应用本身对seo不做要求
• 每次应用运行时，需要一次性把全部的html、js、css等内容加载进来，因此会造成页面一开始请求速度较慢的问题

SPA擅长开发项目：移动端项目、后台项目

项目特点：总的请求页面数目小于500个

vue-SPA-组件切换案例

目标：

实现SPA项目不同标签被单击显示不同的组件的效果

步骤：

1. 创建public/index.html 设置一个空的div容器即可

2. 在src/main.js中要直接使用 "vue"模块 import Vue from ‘vue’

3. 创建src/App.vue组件 ，在main.js中引入，并通过render使用App

4. 创建3个业务组件 ./components/Home.vue ./components/Movie.vue ./components/Music.vue 内容简单设置即可

5. 在App.vue中 引入、注册 各个组件，同时设置代表标签 component，显示各个组件

   <component :is="注册好的组件名称"></component>
   

6. 通过超链接a创建切换标签，同时在href属性里边设置#锚点数据

7. 给component的is属性绑定一个data成员 xianshi ,同时在data中声明 xianshi:“com-home”

8. 在created里边声明事件 window.onhashchange，用于感知#锚点数据有变化

9. 在onhashchange里边通过window.location.hash获取到变化的锚点信息，并以此判断找到对应的组件显示

示例：

src/main.js实现：

src/App.vue实现

<template>
    <div>
      <h2>App根基组件</h2>
      <p>
        <!--给超链接a标签设置 #锚点 信息，以便于具体要显示的组件联系
          #/hm   ======> Home.vue
          #/mv   ======> Movie.vue
          #/ms   ======> Misic.vue

        -->
        <a href="#/hm">首页</a>
        <a href="#/mv">电影</a>
        <a href="#/ms">音乐</a>
      </p>
      <div id="contshow">
        <!--设置一个"代表"，可以使得各个业务组件轮番显示-->
        <!-- <component :is="组件标签名称"></component> -->
        <component :is=" xianshi "></component>
      </div>
    </div>
</template>

<script>
// 引入3个业务组件
import Home from './components/Home'
import Movie from './components/Movie'
import Music from './components/Music'
export default {
  // 生命周期方法
  created(){
    // 页面加载完成就要自动感知浏览器#锚点数据是否有变化
    window.onhashchange = ()=>{
      // 获取变化后的锚点数据(window.location.hash可以获得地址栏#后边的锚点数据)
      var mao = window.location.hash
      // console.log(mao)  // #/ms
      // 根据mao数据，找到对应的组件交给component 的is属性显示
      if(mao==='#/hm'){
        this.xianshi = 'com-home'
      }else if (mao==='#/mv'){
        this.xianshi = 'com-movie'
      }else{
        this.xianshi = 'com-music'
      }
    }
  },
  data(){
    return {
      // 通过成员设置组件显示
      xianshi:'com-home'
    }
  },
  components:{
    'com-home':Home,
    'com-movie':Movie,
    'com-music':Music,
  }
}
</script>

<style lang="less" scoped>
a{margin:0 5px;}
</style>

效果:

小结：

1. index.html设置空的div容器
2. main.js中直接引入vue， App.vue要通过render渲染覆盖div容器
3. 切换标签，超链接 href="#/hm"
4. component is属性 设置显示业务组件
5. #锚点发生变化了,window.onhashchange可以感知到
6. 获取到#锚点数据 window.location.hash
   render渲染覆盖div容器
7. 切换标签，超链接 href="#/hm"
8. component is属性 设置显示业务组件
9. #锚点发生变化了,window.onhashchange可以感知到
10. 获取到#锚点数据 window.location.hash