vue学习--前端路由(一、概念)

路由

路由是一个比较广义和抽象的概念，路由的本质就是对应关系。
比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。

在开发中，路由分为：后端路由和前端路由

路由分为前端路由和后端路由
1).后端路由是由服务器端进行实现，并完成资源的分发
2).前端路由是依靠hash值(锚链接)的变化进行实现

1.1 后端路由

概念：根据不同的用户 URL 请求，返回不同的内容
本质：URL 请求地址与服务器资源之间的对应关系

1.2 前端路由

概念：根据不同的用户事件，显示不同的页面内容
本质：用户事件与事件处理函数之间的对应关系

1.3. 实现简易前端路由

基于URL中的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换）

  
  <body>
    <!-- 被 vue 实例控制的 div 区域 -->
    <div id="app">
      <!-- 切换组件的超链接 -->
      <a href="#/zhuye">主页</a> 
      <a href="#/keji">科技</a> 
      <a href="#/caijing">财经</a>
      <a href="#/yule">娱乐</a>
 
      <!-- 根据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置 -->
      <!-- 可以把 component 标签当做是【组件的占位符】 -->
      <component :is="comName"></component>
    </div>
 
    <script>
      // #region 定义需要被切换的 4 个组件
      // 主页组件
      const zhuye = {
        template: '<h1>主页信息</h1>'
      }
 
      // 科技组件
      const keji = {
        template: '<h1>科技信息</h1>'
      }
 
      // 财经组件
      const caijing = {
        template: '<h1>财经信息</h1>'
      }
 
      // 娱乐组件
      const yule = {
        template: '<h1>娱乐信息</h1>'
      }
      // #endregion
 
      // #region vue 实例对象
      const vm = new Vue({
        el: '#app',
        data: {
          comName: 'zhuye'
        },
        // 注册私有组件
        components: {
          zhuye,
          keji,
          caijing,
          yule
        }
      })
      // #endregion
 
      // 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
      window.onhashchange = function() {
        // 通过 location.hash 获取到最新的 hash 值
        console.log(location.hash);
        switch(location.hash.slice(1)){
          case '/zhuye':
            vm.comName = 'zhuye'
          break
          case '/keji':
            vm.comName = 'keji'
          break
          case '/caijing':
            vm.comName = 'caijing'
          break
          case '/yule':
            vm.comName = 'yule'
          break
        }
      }
    </script>
  </body>

posted @ 2020-04-19 22:13 一纸年华阅读(7) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· vue学习--前端路由(二、Vue Router基本使用)

· vue学习--前端路由(四、Vue Router动态路由匹配)

· 实现简易前端路由

· vue路由

· vue基础之路由（概念，基本使用，路由规则中定义参数，路由的嵌套，使用路由进行经典布局）

阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

历史上的今天：
2018-04-19 反射：获取Class对象的三种方式

公告

潜藏于波涛下寂静无声

跃升于惊涛上乘风化龙...猫

昵称：一纸年华
园龄： 6年11个月
粉丝： 12
关注： 14

+加关注

2025年3月

日

一

二

三

四

五

六

一纸年华

潜藏于波涛下寂静无声，跃升于惊涛上乘风化龙

vue学习--前端路由(一、概念)

路由

1.1 后端路由

1.2 前端路由

1.3. 实现简易前端路由

公告

潜藏于波涛下寂静无声

跃升于惊涛上乘风化龙...猫

搜索

常用链接

我的标签

合集 (5)

随笔分类 (230)

随笔档案 (229)

相册 (12)

阅读排行榜

评论排行榜

最新评论

目录导航


	<body>
	<!-- 被 vue 实例控制的 div 区域 -->
	<div id="app">
	<!-- 切换组件的超链接 -->
	<a href="#/zhuye">主页</a>
	<a href="#/keji">科技</a>
	<a href="#/caijing">财经</a>
	<a href="#/yule">娱乐</a>

	<!-- 根据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置 -->
	<!-- 可以把 component 标签当做是【组件的占位符】 -->
	<component :is="comName"></component>
	</div>

	<script>
	// #region 定义需要被切换的 4 个组件
	// 主页组件
	const zhuye = {
	template: '<h1>主页信息</h1>'
	}

	// 科技组件
	const keji = {
	template: '<h1>科技信息</h1>'
	}

	// 财经组件
	const caijing = {
	template: '<h1>财经信息</h1>'
	}

	// 娱乐组件
	const yule = {
	template: '<h1>娱乐信息</h1>'
	}
	// #endregion

	// #region vue 实例对象
	const vm = new Vue({
	el: '#app',
	data: {
	comName: 'zhuye'
	},
	// 注册私有组件
	components: {
	zhuye,
	keji,
	caijing,
	yule
	}
	})
	// #endregion

	// 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
	window.onhashchange = function() {
	// 通过 location.hash 获取到最新的 hash 值
	console.log(location.hash);
	switch(location.hash.slice(1)){
	case '/zhuye':
	vm.comName = 'zhuye'
	break
	case '/keji':
	vm.comName = 'keji'
	break
	case '/caijing':
	vm.comName = 'caijing'
	break
	case '/yule':
	vm.comName = 'yule'
	break
	}
	}
	</script>
	</body>