ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

第九十四篇:前端路由的概念

2022-06-15 23:34:27  阅读:100  来源: 互联网

标签:hash 前端 十四篇 地址 组件 第九 路由 Left


好家伙,

 

1.什么是路由

 

路由就是对应关系

 

路由是指路由器从一个接口上收到数据包,根据数据包的目的地址进行定向并转发到另一个接口的过程。

 

2.SPA与前端路由

 

SPA指的是一个web网站只有唯一的一个HTML页面,所有组件的展示与切换都在这唯一的一个页面内完成,不同组件之间的切换需要通过前端路由来是实现

 

结论:在SPA项目中,不同功能之间的切换,要依赖于前端路由来完成

 

3.什么是前端路由?

 

Hash地址与组件之间的对应关系

 

4.什么是Hash地址?

锚连接

 

先来新建一个html

<!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:pink;
        }

        #b2{
            background:red;
        }

        #b3{
            background:blue;
        }
        #b4{
            background:black;
        }
 
        .side-bar{
            position:fixed;
            top:0;
            right: 0;
        }
    </style>
</head>
<body>
    <div>
        <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>

 

进入到页面的控制台,

输入location.hash查看hash地址

会发现

 

 hash地址就是#号后的一串地址(包括#号)

 

 

5.前端路由的工作方式

 

(1).用户点击了页面上的路由链接

(2).导致了URL地址栏中的Hash值发生了变化

(3).前端路由监听到了Hash地址的变化

(4).前端路由把当前Hash地址对应的组件渲染到浏览器中

 

我们可以看到:

<a href="#b1">b1</a>  ===> path:'/#/home',component:Home ===> Home组件   他们之间是有对应关系的    

6.实现简易的简单路由

   在App.vue组件中:
<template>
  <div>
    <h1 v-color>我是App根组件</h1>
    
    <a href="#/Left">首页</a>
    <a href="#/Right">右页</a>
    <a href="#/Article">文章</a>
    
    <component :is="comName"></component>
    
  </div>
</template>

<script>
//1.导入需要的组件
import Left from './components/Left.vue'
import Right from './components/Right.vue'
import Article from './components/Article.vue'

export default {
  data(){
    return{
      //在动态组件的位置,要展示的组件的名字,值必须是字符串
      comName:'Left',
      
    }
  },
  created(){
    //只要当期的App组件一被创建,就立即监听window对象的onhashchange事件
    window.onhashchange=()=>{
      console.log('监听到了hash地址的变化',location.hash)
      switch(location.hash){
        case'#/Left':
        this.comNane ='Left'
        break

        case'#/Right':
        this.comNane ='Right'
        break

        case'#/Article':
        this.comNane ='Article'
        break
      }
    }
  },
  
  components:{
        Left,
        Right ,
        Article
       //简写为 Left
     }
}
</script>

 

(好家伙,我自己写的案例没办法成功)

 

另外的几个组件就是普通的色块

Left.vue组件代码如下

<template>
<div>
    <div class="box">
        <h1>我是Left组件</h1>
    </div>
</div>
</template>

<script>
export default {
    data(){
        return{
            count:0
        }
    }

}
</script>

<style scoped>
    .box{
        height: 300px;
        background: pink;
    }

</style>

大致效果如下

 

标签:hash,前端,十四篇,地址,组件,第九,路由,Left
来源: https://www.cnblogs.com/FatTiger4399/p/16380289.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有