HMVue7.1【前端路由的概念与原理】

1 初始项目

npm i 或 npm install

npm audit fix

npm run serve

2 路由 & 前端路由 & 哈希地址/锚链接

在单页面项目中，url地址与页面上组件之间的对应关系

hash地址即url中的锚链接（#）

锚链接虽然不会导致页面刷新，但会在浏览器中产生历史记录（/前进后退）

<!DOCTYPE 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>
  <style>
    .box {
      height: 800px;
    }

    #b1 {
      background-color: pink;
    }

    #b2 {
      background-color: red;
    }

    #b3 {
      background-color: orange;
    }

    #b4 {
      background-color: skyblue;
    }

    .side-bar {
      position: fixed;
      top: 0;
      right: 0;
      background: white;
    }
  </style>
</head>

<body>
  <div class="side-bar">
    <a href="#b1">b1</a>
    <a href="#b2">b2</a>
    <a href="#b3">b3</a>
    <a href="#b4">b4</a>
  </div>

  <div class="box" id="b1"></div>
  <div class="box" id="b2"></div>
  <div class="box" id="b3"></div>
  <div class="box" id="b4"></div>
</body>

</html>

View Code

url中#及其之后的属于hash地址

3 前端路由的工作方式

4 前端路由的简易实现

初始项目效果：

<template>
  <div class="app-container">
    <h1>App 根组件</h1>

    <a href="#">首页</a>
    <a href="#">电影</a>
    <a href="#">关于</a>
    <hr />

    <Home></Home>
    <Movie></Movie>
    <About></About>
  </div>
</template>

<script>
// 导入组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

export default {
  name: 'App',
  // 注册组件
  components: {
    Home,
    Movie,
    About
  }
}
</script>

<style lang="less" scoped>
.app-container {
  background-color: #efefef;
  overflow: hidden;
  margin: 10px;
  padding: 15px;
  > a {
    margin-right: 10px;
  }
}
</style>

View Code

进行路由案例改造：

<template>
  <div class="app-container">
    <h1>App 根组件</h1>

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

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

<script>
// 导入组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

export default {
  name: 'App',
  data() {
    return {
      // 在动态组件的位置，要展示的具体组件的名字，值必须是字符串，默认为home
      comName: 'Home'
    }
  },
  created() {
    //只要当前的 App 组件一被创建，就立即监听 window 对象的 onhashchange 事件，只要url中hash地址变化就会触发这个事件
    window.onhashchange = () => {
      console.log('监听到了hash地址的变化：', location.hash)
      switch (location.hash) {
        case '#/home':
          this.comName = 'Home'
          break
        case '#/movie':
          this.comName = 'Movie'
          break
        case '#/about':
          this.comName = 'About'
          break
      }
    }
  },
  // 注册组件
  components: {
    Home,
    Movie,
    About
  }
}
</script>

<style lang="less" scoped>
.app-container {
  background-color: #efefef;
  overflow: hidden;
  margin: 10px;
  padding: 15px;
  > a {
    margin-right: 10px;
  }
}
</style>