Vue-router（1）之路由基础

1. 使用 <component>标签实现组件切换

　　<component> 是Vue提供的；有一个is属性，is的作用就是显示指定的组件

　　  

<template>
  <div>
    <h1>App根组件</h1>
    <div  @click="comName='my-home'">home</div>
    <div  @click="comName='my-movie'">movie</div>
    <div  @click="comName='my-about'">about</div>
    <a href="#" @click.prevent="comName='my-home'">home</a>
    <a href="#" @click.prevent="comName='my-movie'">movie</a>
    <a href="#" @click.prevent="comName='my-about'">about</a>
    <!-- component 是由Vue官方提供的；作用，就是根据 is 属性指定的名称，来展示指定的组件 -->
    <!-- 可以把 component 标签，理解为 占位符；指定什么 名称，就展示什么组件 -->
    <component :is="comName"></component>
  </div>
</template>

<script>
// 导入需要被按需展示的组件
import Home from './Home.vue'
import Movie from './Movie.vue'
import About from './About.vue'

export default {
  data() {
    return {
      // 指定 在页面上要展示的组件名称， 默认展示首页
      comName: 'my-home'
    }
  },
  // 注册私有组件
  components: {
    'my-home': Home,
    'my-movie': Movie,
    'my-about': About
  }
}
</script>

2. SPA单页应用

2.1 锚链接及常规url的区别

1. 普通的URL地址：会刷新整个页面；会追加浏览历史记录；

2. 锚链接：不会触发页面的整体刷新；会追加浏览历史记录；（锚链接是页面内的跳转）

2.2 什么是SPA,为什么有SPA

• 概念定义：SPA英文全称是Single Page Application, 中文翻译是 “单页面应用程序”；

• 通俗的理解是：只有一个Web页面的网站；网站的所有功能都在这个唯一的页面上进行展示与切换；

• 特点：

  • 只有一个页面

  • 浏览器一开始请求这个页面，必须加载对应的HTML， CSS， JavaScript

  • 用户的所有操作，都在这唯一的页面上完成

  • 页面数据都是用Ajax请求回来的；

• 好处：

  • 实现了前后端分离开发；

  • 用户体验好、快，内容的改变不需要重新加载整个页面；

• 缺点：

• 对SEO不是很友好，因为页面数据是Ajax渲染出来的； 服务器端渲染；

• 刚开始的时候加载速度可能比较慢；项目开发完毕之后，可以单独对首屏页面的加载时间做优化；

• 页面复杂度比较高

2.3 原生实现SPA

　　使用 component 标签的:is属性来切换组件

　　总结：单页面应用程序中，实现组件切换的根本技术点，就是 监听 window.onhashchange 事件：只要浏览器监听到 Hash 值的变化，就会触发指定的事件处理函数

<template>
  <div>
    <h1>App根组件</h1>

    <a href="#/home">首页</a>
    <a href="#/movie">电影</a>
    <a href="#/about">关于</a>

    <component :is="comName"></component>
  </div>
</template>

<script>
// 导入需要的子组件
import Home from './Home.vue'
import Movie from './Movie.vue'
import About from './About.vue'

export default {
  data() {
    return {
      comName: 'my-home'
    }
  },
  created() {
    // 只要浏览器监听到 Hash 值的变化，就会触发指定的事件处理函数
    window.onhashchange = () => {
      const hashStr = window.location.hash.slice(1)
      switch (hashStr) {
        case '/home':
          this.comName = 'my-home'
          break
        case '/movie':
          this.comName = 'my-movie'
          break
        case '/about':
          this.comName = 'my-about'
          break
      }
    }
  },
  // 注册私有子组件
  components: {
    'my-home': Home,
    'my-movie': Movie,
    'my-about': About
  }
}
</script>