Vue入门十、路由跳转（哈希模式）

最新推荐文章于 2024-06-14 15:08:43 发布
最新推荐文章于 2024-06-14 15:08:43 发布
阅读量2.7k 收藏
点赞数
文章标签： javascript 前端 ViewUI
原文链接：http://blog.51cto.com/12012821/2401882
版权

单页一应用的路由模式有再种
1、哈希模式（利用hashchange事件监听url的hash的改变）
window.addEventListener("hashchange", function (e) {console.log(e)})
2、history模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript" src="vue.js"></script>
    <a href="#/login">登录</a>
    <a href="#/register">注册</a>
    <div id="app"></div>
    <script type="text/javascript">
        var appdiv = document.getElementById("app")
        window.addEventListener("hashchange", function (e) {
            console.log(e.newURL)
                        // #/login
            console.log(location.hash)
            switch (location.hash) {
                case "#/login":appdiv.innerHTML="我是登录页面";
                    break;
                case "#/register":appdiv.innerHTML="我是注册页面";
                break;
            }
        })
    </script>

</body>
</html>

转载于:https://blog.51cto.com/12012821/2401882

weixin_34261739
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
149Vue-模拟router路由component占位符onhashchange监控哈希值变化
Gy_9543的博客
08-09 498
1.路由的概念 路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。 那么url地址和真实的资源之间就有一种对应的关系，就是路由。 路由分为前端路由和后端路由 1).后端路由是由服务器端进行实现，并完成资源的分发 2).前端路由是依靠hash值(锚链接)的变化进行实现 后端路由性能相对前端路由来说较低，所以，我们接下来主要学习的是前端路由 前端路由的基本概念：根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系 前端路
单页面路由跳转之hash模式
TomHe789
10-30 330
模式主要通过监听URL地址的哈希值的变化来实现页面更新。
vue路由：hash模式下跳转404的问题。
小芳的专栏
06-14 207
3.问题的产生：登录后跳转home首页正常，点击跳转管理层页面（新打开浏览器窗口）。这时管理层页面编写标签：，跳转首页为404。2.首页和登录页在一个动态路由模块，而其他的管理层页面模块在另外一个动态路由模块。1.没有动态加载到home的动态路由，找不到路由，因此跳转404。原因：hash模式跳转后会记录上次浏览器的访问记录。a标签href的跳转换成@click，跳转后强制刷新当前页面。在点击浏览器自带的回退上一步的按钮时候又跳转到404了。
hash模式下路由跳转页面不刷新
lixu_boke的博客
06-09 1858
举个例子：当我在注册页面->注册状态页面->注册页面，在这个期间我从注册状态页面进行缓存的数据想要在注册页面使用，然而注册页面不会重新加载，显示的还是跳转前的状态；mode为hash时，纯粹页面，路由跳转过之后跳转上一级重复路由页面不会重新渲染。//js原始方法刷新，相当于按F5刷新页面，会有短暂的白屏，相当于页面的重新载入。说实话问题是处理了，但是我对于这两种方式去重载页面会造成什么问题不太了解；刚开始的时候我时候的是watch去监听路由然后刷新页面。这种情况下我们需要把页面销毁掉就可以进行重载了；
Vue之路由跳转，query传参，子路由，路由模式--hash&history，VueRouter router route三者区别区别
chuxialia的博客
09-11 1051
Vue之路由跳转，query传参，子路由，路由模式--hash&history，VueRouter router route三者区别区别
路由之间是怎么跳转的？有哪些方式？
有我更精彩的博客
02-21 916
在现代Web开发中，前端路由已成为不可忽视的一部分。它为用户体验提供了更流畅的页面切换效果，同时也为开发人员提供了更好的代码结构和维护性
解决vue+router路由跳转不起作用的一项原因
10-15
总结来说，当Vue Router的`history`模式下路由跳转失效，主要原因是服务器未配置处理未知路径的重定向规则。通过在服务器端配置`connect-history-api-fallback`中间件，可以确保所有的路由请求都能正确地加载到应用...
vue router 配置路由的方法
10-18
Vue Router 是 Vue.js 应用中的官方路由管理器，它使得在单页面应用(SPA)中管理页面间的导航变得简单。本文将深入讲解如何配置 Vue Router，包括基本实现、路由重定向、路由高亮以及路由参数。 ### 基本实现 Vue ...
vue实现登录后页面跳转到之前页面
08-28
Vue 实现登录后页面跳转到之前页面的知识点 一、 Vue 路由基础 在 Vue 中，路由是指用户在浏览器中输入的 URL 与应用程序中对应的映射关系。路由是 Vue 应用程序中的一个关键组件，用于处理用户的导航请求。在本文...
vue路由的配置和页面切换详解
11-19
以下是对Vue路由配置和页面切换的详细解释： 1. **Vue 路由基础** Vue 路由通过监听浏览器URL的哈希（#）变化来触发页面组件的切换。主要涉及三个关键元素： - `<router-link>`：用于创建可点击的导航链接，当...
vue-router路由 myv源码.zip
09-03
- **路由跳转逻辑**：当调用 `router.push` 或其他导航方法时，Vue Router 如何更新视图。 - **组件懒加载**：源码如何处理组件的按需加载，如何拆分代码块，以及何时触发加载。 - **路由元信息（meta）**：如何使用...
Vue的路由实现：hash模式 和 history模式原理及区别
m0_69892739的博客
04-24 927
### 2.1.1Hash模式： 在url中有符号“#”存在。URL中的#符号后面的部分，也称为锚点。，用window.location.hash读取； **特点：** - hash不会重加载页面 - hash 模式下，仅 hash 符号之前的内容会被包含在请求中。如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误 - 兼容性好，可以支持所有浏览器 **缺点：** - 页面不美观 ### 2.1.2History模式: history
vue2.0的三种常用的传值方式，并且如何实现？
weixin_42856661的博客
08-06 356
父传子：首先在父组件里面定义一个属性，然后子组件通过‘props’这个关键字来接收。 子传父：子组件要先绑定一个事件，通过‘emit′这个关键字来发送数据，最后父组件通过‘emit′这个关键字来发送数据，最后父组件通过‘emit’这个关键字来发送数据，最后父组件通过‘on’来接收数据。 非父子： 1.他们之间有一个共同的容器，假设A和B之间传值，我们可以用localstoage和Sessio...
hash路由模式与history路由模式
麦呢头冷的博客
11-02 8580
1. hash路由模式 hash模式：使用 URL 的 hash 来模拟一个完整的 URL, 其显示的网络路径中会有 “#” 号 hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash后刷新, 也不会有问题 hash模式示例: http://localhost:8080/#/home http://localhost:8080/#/user 参考: hashChange 2. history模式 history模式： 美化后的hash模式，路...
Vuejs+Webpack部署
Lamar's Blog
11-01 928
使用vuejs+webpack在本地开发的时候很顺利，但在打包部署后子页面不能通过url地址直接访问到，只能通过主页点击前往各子页面
vuejs中路由器的两种模式-哈希模式与历史模式
itclanCoder
08-05 2669
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号（ID：itclanCoder）如果不知道如何操作点击这里,标星不迷路前言路由器分别有两种模式,一种是hash模式,另一种是history模式,在使用vue-cli以及vue-router默认搭建的vue项目,如果不做特殊的配置...
Vue路由跳转原理（哈希模式）
lql_h的博客
10-12 3036
概述 哈希模式（利用`hashchange` 事件监听 url的hash 的改变） ``` window.addEventListener('hashchange', function(e) { console.log(e) }) ``` 核心是锚点值的改变，我们监听到锚点值改变了就去局部改变页面数据，不做跳转。跟传统开发模式url改变后 立刻发起请求，响应整个页面，渲染整个页面...
去除vue路由跳转地址栏后的哈希值#
热门推荐
oceanheavenweb的博客
11-02 1万+
去除vue路由跳转地址栏后的哈希值#，我们只需要在路由跳转的管理文件router目录下的index.js中加上一句代码即可去掉哈希值# import Vue from 'vue' //1.引入vue-router import Router from 'vue-router' import find from '../components/find' import mall from
vue用两种路由模式(hash、history)实现导航栏
王永存
08-18 8855
一般的网站都会有导航栏，导航栏一般要求：有选中状态，点击加载对应页面，并给个选中状态，刷新之后选中不能消失，页面也要是对应的页面，点击浏览器上的前进和后退也要好使。这些东西在多页应用上可能考虑的不是太多，但是在vue单页应用上就不得不考虑了。使用vue-cli搭建好脚手架，然后用vue-router提供的两种路由来实现导航栏。写一个简单的demo，效果如下： hash模式： vue-cli...
Vue3使用路由跳转
最新发布
06-20
在Vue3中，使用路由跳转通常通过Vue Router库来实现。Vue Router是一个非常流行的前端路由库，它帮助我们将单页应用（SPA）的不同部分组织成可导航的视图。 以下是如何在Vue3项目中使用路由跳转的基本步骤： 1. **安装Vue Router**： 首先，在项目中安装Vue Router，可以通过npm或yarn进行安装： ```bash npm install vue-router # 或者 yarn add vue-router ``` 2. **配置`router.config.js`**： 在`src/router`目录下创建一个`index.js`文件，定义你的路由规则。例如： ```javascript import { createRouter, createWebHashHistory } from 'vue-router'; import Home from '@/views/Home.vue'; import About from '@/views/About.vue'; const routes = [ { path: '/', name: 'Home', component: Home, }, { path: '/about', name: 'About', component: About, }, ]; const router = createRouter({ history: createWebHashHistory(), // 使用浏览器的哈希历史模式 routes, }); export default router; ``` 3. **在组件中使用`this.$router`**： 在需要导航的地方，比如按钮点击事件或导航链接上，你可以使用`this.$router.push`或`this.$router.go`来导航： ```html <!-- 在一个组件内的按钮 --> <button @click="goToAbout"> Go to About </button> <!-- 使用组件内部的方法 --> methods: { goToAbout() { this.$router.push('/about'); } } ``` 4. **设置`<router-view>`**： 在App.vue或其他布局组件中，添加`<router-view>`标签，它会根据当前的路由显示相应的组件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值