149Vue-模拟router路由component占位符onhashchange监控哈希值变化

最新推荐文章于 2024-05-12 09:11:25 发布
最新推荐文章于 2024-05-12 09:11:25 发布
阅读量515 收藏 1
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gy_9543/article/details/107891083
版权
本文介绍了路由的基本概念，包括前端路由和后端路由的区别。重点讲解了前端路由，特别是Vue中如何利用hash值变化实现路由，并通过监听`onhashchange`事件来控制组件的切换，实现页面内容的动态更新。
摘要由CSDN通过智能技术生成

1.路由的概念

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

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

后端路由性能相对前端路由来说较低，所以，我们接下来主要学习的是前端路由
前端路由的基本概念：根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系
前端路由主要做的事情就是监听事件并分发执行事件处理函数
在这里插入图片描述

2.前端路由的初体验

前端路由是基于hash值的变化进行实现的（比如点击页面中的菜单或者按钮改变URL的hash值，根据hash值的变化来控制组件的切换）
核心实现依靠一个事件，即监听hash值变化的事件
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible
最低0.47元/天 解锁文章
教练我真的想敲代码
关注
专栏目录
Vue3 - 路由 Vue-router 4.X（配置与使用教程）
王佳斌
11-30 3864
vue3 路由官方文档，vue3 路由文档，vue-router4 官方文档，使用Vite构建Vue3项目,对路由Vue Router，Vue3中 Vue Router4路由的配置，vue3-vueRouter v4.x， vue3 中 vue-router4 基本使用(路由基本配置)，Vue3 - Router@4.x使用，vue-router4.x教程，Vue 3 中基于 vue-router 4 的路由配置与使用的简单示例，Vue实战—路由轻松设置vue-router(3) ，10分钟快速上手VueR
150Vue-Router路由概述+基本使用router-view占位符+重定向redirect
Gy_9543的博客
08-09 4378
Vue Router简介 它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用。 Vue Router和Vue.js非常契合，可以一起方便的实现SPA斜体样式(single page web application,单页应用程序)应用程序的开发。 Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router Vue Router的特性： 支持H5历史模式或者hash模式 支持嵌套路由 支持路由参数 支持编程式路由 支持命名路由 支持路由导航守卫 支持路由过
监听window.onhashchange
我的博客
11-18 1130
<script> window.onhashchange = function(event) { console.log('ceshi',event.oldURL, event.newURL); let hash = window.location.hash //通过location对象来获取hash地址 console.log('#hash',hash) // "#/notebooks/260827/list" 从#号开始 }
在Vue中实现随hash改变响应菜单高亮
高先生的猫
09-10 393
情景 vue+Element 实现管理页面菜单栏， 点击菜单时 router 改变 hash 访问不同子组件。但是改变 hash 时菜单栏展开状态和 highlight 并不会同步， 需要手动实现。 Try Try See 第一反应是通过 onhashchange 监听 hash 的变化， 将location.hash.slice(2)推给 menu 的default-active即可。 此时通过手动输入 url 或者前进后退时均可正常加载对应状态，但是通过组件中的 link 访问时，...
Vue 前端路由的底层原理 onhashchange
Infinityfeng的博客
07-26 1875
vue router 就是基于onhashchange封装的。 onhashchange大致如下图： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200726143246285.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0luZmluaXR5ZmVuZw==,size_16,color_FFFFFF,t
route占位符
qq_45178972的博客
11-02 736
route.param.id
vue-router实现嵌套路由的讲解
01-19
需要注意的是：父组件中的<router></router>是子组件的占位符是必不可少的 嵌套路由的现象：点击了路由跳转之后父路由组件的内容一直呈现；子路由的内容进行切换，地址栏的路径也随之改变。 // 嵌套路由 { path: ...
vue-router路由模式详解(小结)
10-16
Vue Router 利用浏览器的 `onhashchange` 事件来监听 URL 的变化，当哈希值改变时，触发对应的组件渲染。由于哈希值的变化不会导致页面重新加载，因此可以实现页面状态的保存。此模式在所有浏览器中都兼容，无需额外...
vue页面中的window.onhashchange事件无法触发分析
最新发布
落叶秋风早的博客
05-12 814
对某个使用了Vue框架的页面，编写一些脚本操作修改DOM元素。需求之一就是监听URL地址变化，例如：从切换到。URL有变化就触发执行某些操作。
关于Hash、onHashChange事件
Yutao_fullstack
06-09 3633
现在的web应用程序越来越多的使用ajax异步请求完成页面的无缝刷新，导致浏览器的URL不会发生任何变化而完成了请求，从而破换了用户浏览体验。同时本次浏览的页面内容在用户下次使用URL访问时将无法重新呈现。而解决该问题的一个途径便是使用window.location.hash属性及window的onhashchange事件。下面具体介绍几个使用过程中必须理解的要点：1、hash值浏览器是不会随请求...
vue-router—2hash和history模式
jiaojsun的博客
06-09 188
开始一个应用 router/index.js 此项目使用的是history模式 import Vue from 'vue' import VueRouter from "vue-router"; // 作为vue的插件 Vue.use(VueRouter) import home from "@/components/home"; import about from "@/comp...
Vue入门十、路由跳转（哈希模式）
weixin_34261739的博客
05-29 2746
单页一应用的路由模式有再种1、哈希模式（利用hashchange事件监听url的hash的改变）window.addEventListener("hashchange", function (e) {console.log(e)})2、history模式 <!DOCTYPE html> <html lang="en"> <head> <meta c...
Vue @占位符的代码提示
tby_pr的博客
11-04 738
在vue中提供了一个占位符，@表示src 在根目录 创建一个 【jsconfig.json】文件
vue的两种路由模式原理
混世小妲己
08-08 6960
1、hash模式：原理是onhashchange事件，url都会被浏览器记录下来，只能改变#后面的url片段 2、history模式：根据history api中的pushState,replaceState两个方法。 通过pushstate把页面的状态保存在state对象中，当页面的url再变回这个url时，可以通过event.state取到这个state对象，从而可以对页面状态进行还原，这...
初学Vue2.0——前端路由
weixin_46548238的博客
09-12 239
一、路由的概念与原理 1. 什么是前端路由？ 前端路由就是：哈希地址（锚链接）与组件之间的对应关系。 哈希地址：url里面＃及其以后的地址叫做哈希地址 要想获取到哈希地址，使用location.hash方法。 2. 前端路由的工作方式 前端路由的工作方式： 用户点击了页面上的路由链接； 导致了URL地址栏中的Hash值发生了变化； 前端路由监听到了Hash地址的变化； 前端路由把当前Hash地址对应的组件渲染到浏览器中。 3. 前端路由的底层原理 前端路由的底层原理是：监听了浏览器的onhashch
Vue 路由
奇奇的博客
05-20 593
认识路由: 1.定义:路由的本质就是一种对应关系，比如说url地址和资源之间的对应关系 2.分类:后端路由和前端路由 3.实现简易的前端路由,使用onhashchange事件监听hash值的改变 监听hash值变化的事件:window.onhashchange = function() { } 4.前端路由的核心思路: 通过a标签的点击改变锚点hash值 使用window.onhashchange监听hash值的改变 通过location.hash获取到当前的hash值...
vue-router路由的基本使用
廖若星辰-LTY
10-19 215
vue-router 是 Vue 实现组件化/模块化 开发的关键，也是实现单页面复应用的核心，是 Vue 项目中必不可少的插件，那么我们来看一下怎么在项目中安装配置与使用 vue-router 。 安装与配置 直接下载 / CDN https://unpkg.com/vue-router/dist/vue-router.js 引入加载使用：在 Vue 后面加载vue-router，它会自动安装的： <script src="/path/to/vue.js"></scri...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值