vue路由原理

最新推荐文章于 2023-07-13 08:24:42 发布
最新推荐文章于 2023-07-13 08:24:42 发布
阅读量205 收藏
点赞数
分类专栏： 知识点回顾
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39748755/article/details/100145740
版权

一、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" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
    <script>
        //自定义三个UI组件
        var UI = `
                <div>
                <h1>我是根页面，00000</h1> 
                </div>
                `;
        var UI1 = `
                <div>
                <h1>我是一页面，111111</h1> 
                </div>
                `;
        var UI2 = `
                <div>
                <h1>我是二页面，2222222</h1> 
                </div>
                `;
        //自定义路由规则
        var router = [
            { path: "/", component: UI },
            { path: "/u1", component: UI1 },
            { path: "/u2", component: UI2 },
        ]
        //通过路由规则来显示UI组件
        function render() {
            //获取hash值的路径
            var hashv = location.hash;
            if (hashv == "") location.hash = "/"; //页面刚刚加载时，设置为/路径
            var path = location.hash.slice(1); //获取去掉了#号后的实际路径
            //根据hash值路径渲染页面
            var content = document.getElementById("app");
            router.forEach(function (ele) {
                if (ele.path == path) {
                    content.innerHTML = ele.component;
                }
            })
        }
        render(); //默认执行渲染函数 render
        //监听hash值变化，同步渲染页面组件
        window.addEventListener("hashchange", function () {
            render();
        })
    </script>
</body>

</html>

二、点击路由

<!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" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 通过类似于router-link来实现hash模式的路由触发 -->
        <button to="/">UI</button>
        <button to="/u1">UI1</button>
        <button to="/u2">UI2</button>
        <content id="content"> </content>
    </div>
    <script>
        //自定义三个UI组件
        var UI = `
                <div>
                <h1>我是根页面，00000</h1> 
                </div>
                `;
        var UI1 = `
                <div>
                <h1>我是一页面，111111</h1> 
                </div>
                `;
        var UI2 = `
                <div>
                <h1>我是二页面，2222222</h1> 
                </div>
                `;
        //自定义路由规则
        var router = [
            { path: "/", component: UI },
            { path: "/u1", component: UI1 },
            { path: "/u2", component: UI2 },
        ]
        //通过路由规则来显示UI组件
        function render() {
            //获取hash值的路径
            var hashv = location.hash;
            if (hashv == "") location.hash = "/"; //页面刚刚加载时，设置为/路径
            var path = location.hash.slice(1); //获取去掉了#号后的实际路径
            //根据hash值路径渲染页面
            var content = document.getElementById("content");
            router.forEach(function (ele) {
                if (ele.path == path) {
                    content.innerHTML = ele.component;
                }
            })
        }
        render(); //默认执行渲染函数 render
        //监听hash值变化，同步渲染页面组件
        window.addEventListener("hashchange", function () {
            render();
        })
        //监听含有to属性的按钮被点击
        document.getElementById("app").onclick = function () {
            var path = event.target.getAttribute("to"); //获取点击按钮的路径
            if (path) {
                location.hash = path;
            }
        }
    </script>
</body>

</html>

三、history模式

<!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" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 通过类似于router-link来实现hash模式的路由触发 -->
        <button to="/">UI</button>
        <button to="/u1">UI1</button>
        <button to="/u2">UI2</button>
        <content id="content"> </content>
    </div>
    <script>
        //自定义三个UI组件
        var UI = `
                <div>
                <h1>我是根页面，00000</h1> 
                </div>
                `;
        var UI1 = `
                <div>
                <h1>我是一页面，111111</h1> 
                </div>
                `;
        var UI2 = `
                <div>
                <h1>我是二页面，2222222</h1> 
                </div>
                `;
        //自定义路由规则
        var router = [
            { path: "/", component: UI },
            { path: "/u1", component: UI1 },
            { path: "/u2", component: UI2 },
        ]
        //通过路由规则来显示UI组件
        function render() {
            //页面刚刚加载时，设置为/路径
            if (location.pathname.match(/\.html/) != null) {
                history.pushState(null, null, "/");
            }
            //获取路径名
            var pathname = location.pathname;
            //根据pathname渲染页面
            var content = document.getElementById("content");
            router.forEach(function (ele) {
                if (ele.path == pathname) {
                    content.innerHTML = ele.component;
                }
            })
        }
        render(); //默认执行渲染函数 render
        //监听含有to属性的按钮被点击
        document.getElementById("app").onclick = function () {
            var path = event.target.getAttribute("to"); //获取点击按钮的路径
            if (path) {
                history.pushState(null, null, path);
                render();
            }
        }
    </script>
</body>

</html>

 

tjh0001
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue路由demo
08-03
通过这个“Vue路由demo”，你可以亲手实践以上这些概念，从而深入理解Vue Router的工作原理以及如何在实际项目中应用。通过不断练习和调试，你将更加熟练地掌握Vue.js路由的精髓，提升你的前端开发技能。
【vue路由的原理，配置，传参】
qq_72580318的博客
09-20 1767
例如：实现一些页面之间的互相跳转。提示：以下是本篇文章正文内容，下面案例可供参考例如：以上就是今天要讲的内容，本文仅仅简单介绍了vue路由的实现方法以及原理的使用，而vue提供了大量能使我们快速便捷地处理数据的函数和方法。
vue页面路由的原理
weixin_42560424的博客
04-24 1245
时需要注意路由的设计和管理，避免出现混乱的路由结构和重复的代码。同时，还需要注意路由的性能优化，如使用懒加载、动态路由等方式来提高页面加载速度和用户体验。的变化来实现路由的跳转。这种方式可以兼容所有浏览器，并且不会向服务器发送请求，适合单页应用的开发。模式都有各自的优缺点，选择合适的模式需要根据具体的项目需求和实际情况来决定。中，我们需要定义一组路由规则，每个路由规则包含一个路径和对应的组件。具体来说，当浏览器接收到一个新的路由请求时，会发送一个。和路由规则匹配，找到对应的组件，并渲染到。
reactrouter监听路由变化_浅谈vue-router：路由原理
weixin_39564524的博客
11-21 435
在单页面应用中最为显著的特点之一就是选用前端路由系统，通过更改url,但不用重新请求页面的情况下，更新视图。 更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式： 1.Hash --- 利用 URL 中的hash("#");　 2.利用 History interface 在HTML5中新增的方法。 在Vue中，vue-ro...
Vue的路由实现原理解析（最清晰）
quieta的博客
05-17 6985
Vue的路由实现原理解析（最清晰） 一般源码中，都会用到 window.history 和 location.hash history 实现 window.history 对象包含浏览器的历史，window.history 对象在编写时可不使用 window 这个前缀。history是实现SPA前端路由是一种主流方法，它有几个原始方法： history.back() 与在浏览器点击后退按钮相同 history.forward() 与在浏览器中点击按钮向前相同 history.go(n) 接受一个整数作为参
Vue-Router与原理
m0_73442777的博客
04-18 1566
Vue Router的原理是基于浏览器的History API，即HTML5中新增的History接口，通过这个API可以在浏览器中动态修改URL，并在不刷新页面的情况下实现页面的切换。Vue Router基于History API提供了一个组件化的路由管理解决方案，可以方便地进行路由的配置和管理。
Vue路由前后端设计总结
01-19
一开始我还以为vue的路由只能用在工程化的项目里面呢，然后研究了一下才发现，在脚本化里面也是可以用的。其实呢不管在哪里用，把原理研究明白就对了。 一、 官网demo 这里不得不吐槽一下官网，写的不清不楚的，在...
浅析前端路由简介以及vue-router实现原理
08-27
前端路由简介以及vue-router实现原理 前端路由是指在客户端浏览器中，根据不同的 URL 路径，请求不同的资源，请求不同的页面的一种方式。前端路由的出现是为了实现单页应用（SPA），使得页面交互更加流畅。 前端...
vue相同路由跳转强制刷新该路由组件操作
10-14
在Vue.js应用中，路由是...在进行路由跳转和组件刷新时，理解Vue Router的工作原理至关重要，这可以帮助我们编写出更加灵活且可维护的代码。同时，遵循最佳实践和避免常见错误，如路由命名冲突，也能提高应用的质量。
解决vue 路由变化页面数据不刷新的问题
08-27
本篇文章将深入探讨如何解决Vue路由变化时页面数据不刷新的问题。 首先，我们需要理解Vue Router的工作原理。Vue Router采用的是单页面应用程序（SPA）模式，当路由改变时，视图（View）通常应该根据新的路由参数...
VUE路由的原理
最新发布
路人贾！
07-13 560
VUE路由的原理
vue中路由的实现原理？
yzhlove_cs的博客
09-20 9342
vue中路由的实现原理？ 1、首先需要了解一下Vue路由分为两种，一种是哈希路由，其最明显的特征是URL地址带‘#’号的，其实对地址栏也就不怎么美观一点。其次是history路由也就是URL不带‘#’号的地址，也就是我们比较常见的地址。 2、为什么要了解Vue路由的实现原理呢？其实我们都知道Vue 构建的单页面应用，其实根据路由地址的不同渲染不同的组件，在无刷新的前提下进行组件切换，根据路由地址切换不同的组件 下面介绍一下简单的例子来了解Vue路由的实现原理 <template> <d
【vue回顾系列】20-大白话讲解vue-router路由实现的基本原理，保证让你绝对能懂！
庞囧的博客
03-28 1018
文章相较于之前做了删减，将稍微深入一点的知识点（例如源码，拓展）和一些表述比较乱的地方剔除，目的是为了能够用最小精力去记住，并且输出。在过去的前后端未分离时代，页面的每次跳转都是请求对应的html文件到浏览器进行渲染，页面才能展示。而现在前后端分离时代，客户端一次性加载大部分的前端文件，url变化时，不用向后台请求新的html文件，只需要将当前页面内的html内容进行更换，渲染，就可以实现页面内容的切换。这就是单页面，简称SPA。
vue-router 原理
AIROU_ao的博客
12-02 1705
用了 HTML5 的实现，单页路由的 url 就不会多出一个#，变得更加美观。hash 是 URL 中 hash (#) 及后面的那部分，常用作锚点在页面内进行导航，最重要的是改变 URL 中的 hash 部分不会引起页面刷新。vue-router 是 Vue.js 官方的路由插件，它和 vue.js 是深度集成的，适合用于构建单页面应用。在 vue-router 单页面应用中，则是路径之间的切换，也就是组件的切换。系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。
超详细的vue-router原理
jiangjialuan2的博客
05-17 7334
vueRouter是前端路由，在无需刷新页面的情况下更新视图。 两种模式：一种是Hash模式，一种是History模式。分别就是在HTML5History，HashHistory两个类中实现的。 一、vue-router组成 vue-router组件有三个部分 1.link：即v-link 2.view：元素指令，即 3.router：核心部分 二、vue-router简单的一个流程 1.url 变化 2.history监听（onChange事件）：window.addEventListener(‘hash
Vue——token原理、路由导航守卫与请求拦截器
weixin_43599321的博客
01-08 2537
当页面跳转时，如何才能保存页面的状态呢？有三种方式能够保存页面状态这篇博客只讲解一下token方式，关于cookie与session的原理可以查阅往期node.js的博客。
Vue - 路由守卫
wen110898的博客
10-28 614
路由守卫是什么？ 官方解释： “导航”表示路由正在发生改变。正如其名，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。 简单的说，导航守卫就是路由跳转过程中的一些钩子函数。路由跳转是一个大的过程，这个大的过程分为跳转前中后等等细小的过程，在每一个过程中都有一函数，这个函数能让你操作一些其他的事儿，这就是导航守卫。类似于组件生命周期钩子函数 路由守卫分类 【1】全局守卫： 是指路由实例上直接操作的钩子函数，特点是所
Vue：路由原理（hash）
m0_47883103的博客
09-04 4643
没想到路由的原理这么简单
什么是vue-router，工作原理是什么
Hy_0452的博客
04-12 5798
一、vue-router是什么 路由就是SPA的路径管理器。vue-router是Vuejs官方的路由插件，它和vuejs是深度集成的，适用于构建单页面应用。vue的SPA是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。 传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。 二、vue-router实现原理 2.1 Hash模式 vue-router默认h
vue路由原理以及实现原理，以及路由的切换是为了什么
04-21
Vue路由的实现原理是利用了Vue的组件化机制，将不同的组件对应到不同的路由。实现方式是通过Vue Router插件，在定义路由时给每一个路由指定对应的组件，然后在页面中通过<router-view>标签来展示加载的组件。路由的切换是为了实现单页应用，通过改变URL地址，从而实现不同的组件展示，使页面更加流畅，提升用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值