Vue-router路由到错误的页面，链接必须在路径前添加'#‘

Vue-router是Vue.js官方的路由管理器，用于实现前端路由。当我们使用Vue-router进行页面跳转时，有时会遇到路由到错误的页面的情况。为了解决这个问题，我们可以在路径前添加'#'。

在Vue-router中，路径前添加'#'表示使用hash模式进行路由。hash模式是指在URL中使用'#'来表示路由，例如：http://example.com/#/home。这种模式的优势是可以兼容不支持HTML5 History API的浏览器，并且不需要服务器端配置。

使用hash模式的应用场景包括单页应用（SPA）和需要兼容低版本浏览器的项目。对于需要在URL中显示完整路径的项目，可以考虑使用history模式。

在腾讯云中，推荐使用Serverless Framework进行前端部署和管理。Serverless Framework是一个开源的全栈无服务器应用框架，支持多云厂商，包括腾讯云。通过Serverless Framework，可以轻松部署Vue.js应用，并且支持自定义域名、CDN加速等功能。

腾讯云Serverless Framework产品介绍链接地址：https://cloud.tencent.com/product/sls

总结：在Vue-router中，为了解决路由到错误页面的问题，可以在路径前添加'#'，使用hash模式进行路由。腾讯云推荐使用Serverless Framework进行前端部署和管理，支持自定义域名、CDN加速等功能。

相关·内容

vue脚手架安装方法——2023年5月28日版本

安装VUE与路由 npm install vue -g npm install vue-router -g 在全局文件夹下的【node_modules】下就能看到我们刚安装的xue和vue的router...服务cmd页面通过vue服务路径访问访问成功：http://localhost:8080/ vue层级说明源码目录 vetur插件安装直接在拓展中搜索vetur第一个安装上即可。...：在components下添加3个组件：【demo1.vue】、【demo2.vue】、【demo3.vue】设置路由：我们在【router】下的index.js中操作路由 import Vue...页面效果：跳转效果：路径与内容相匹配，测试成功。表格遍历测试demo3 将以下代码复制给demo3.vue文件。...到这里有关vue的基础操作就讲解完毕了，我相信到这里后，只要是你对前端有所了解的，几乎就可以说是能上手干活了，祝大家工作顺利。

2623 0

vue项目创建步骤和路由router知识点

1.6 cd进入项目 cd my_vue_pro 1.7 添加需要的依赖包，比如添加vue路由vue-router依赖包，可以使用 npm install vue-router , 或者 vue...而有点类似于超链接标签，上有个必写的属性to, 就类似于超链接的href属性，设置要跳转的路由链接。　　...路径参数，望文生义意思是参数作为路径的一部分，在配置路由的时候把参数配置好，然后在浏览器中输入url时，必须传参，否则会找不到这个路由这个页面。...然后在pageA页面中用：this.$route.params 来获取所有的路径参数。　　而查询参数则没有路径参数这么严格，路由不会对此做验证。路由参数在url中的表现为页面链接后面加 ?...$route.matched: 里面包含了路由的一些匹配信息 2.3 路由props设置及路径参数获取　　在设置页面路由时，如果增加一个props属性，并设置为true, 则在页面中可以直接拿到参数，

2K4 0

Vue-Router学习笔记，持续记录

但因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种情况，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。...的函数里面执行，否则作用域改变useRouter执行是undefined 5. vue-router在网页打开运行js的时候就开始接管路由了，然后会根据当前访问的链接去匹配对应的路由（如：链接edit...单页面应用下，用户点击刷新 history模式下，路由变化会改变当前的URL，正常的浏览器环境下，用户刷新时，请求的链接仍然是最开始请求的入口链接。但是在企业微信的浏览器内，则是用改变后的链接去刷新。...URL匹配 = 创建路由对象的时的基址+路由路径） —> 路由路径匹配成功 —> 加载路由对应的组件 —> 渲染到App.vue的router-view标签 —> 加载完毕 3.普通js...解决办法：router-view页面添加key，将fullPath作为每个页面的唯一值，当key值不同时，页面就会刷新

9.2K4 0

vue-router（路由）详细教程

vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。...在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。 ...router.push方法就是用来动态导航到不同的链接的，这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。...from:路径跳转前的路径信息，也是一个对象的形式。 next:路由的控制参数，常用的有next(true)和next(false)。...这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。

3K3 0

vue 知识总结

vue-router vue-router 是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。...vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。...在vue-router单页面应用中，则是应该是路径之间的切换，也就是组件的切换路由和页面(组件)对应 [l_1.jpg] ==重点==：如果需要有些页面组件是挂载在某个组件之下，可以使用 children...path -> 是要跳转的路由路径，也可以是路由文件里面配置的 name 值，命名路由，两者都可以进行路由导航 params -> 是要传送的参数，参数可以直接key:value形式传递（类似post...vue-custom-element 添加全局资源：指令/过滤器/过渡等，如 vue-touch 通过全局 mixin 方法添加一些组件选项，如: vue-router 添加 Vue 实例方法，通过把它们添加到

1.3K8 0

Vue学习笔记——Vue-router「建议收藏」

//每一个链接都是一个对象 path: '/', //链接路径 name: 'Hello', //路由名称， component: Hello...第2节：vue-router配置子路由子路由的情况一般用在一个页面有他的基础模版，然后它下面的页面都隶属于这个模版，只是部分改变样式。...第3节：vue-router如何参数传递我们先想象一个基本需求，就是在我们点击导航菜单时，跳转页面上能显示出当前页面的路径，来告诉用户你想在所看的页面位置（类似于面包屑导航）。...我们犯过错误，踩过了坑，希望大家就不要踩了。第8节：路由的过渡动画页面切换时我们加入一些动画效果，提升我们程序的动效设计。这节课我们就学习一下路由的过渡动画效果制作。...三个参数： 1. to:路由将要跳转的路径信息，信息是包含在对像里边的。 2. from:路径跳转前的路径信息，也是一个对象的形式。

2.2K1 0

【面试需要-Vue全家桶】一文带你看透Vue前端路由

前端路由前端路由是根据不同的用户事件，显示不同的页面内容，本质是用户事件和事件处理函数之间的对应关系，用户触发事件，响应浏览器，浏览器中含有前端路由，事件处理函数，用户触发事件给到前端路由，响应事件处理函数...vue-router的基本使用基本使用步骤，第一步，引入相关的库文件，第二步，添加路由连接，第三步，添加路由填充位，第四步，定义路由组件，第五步，配置路由规则并创建路由实例，第六步，把路由挂载到vue... append，在当前路径前添加基路径。...> 基本使用步骤，第一步引入相关的库文件 // 导入vue文件，为全局window对象挂载vue构造函数// 导入vue-router文件，为全局window对象挂载vuerouter构造函数第二步添加路由链接...叫做路由占位符// 将来要通过路由规则匹配到的组件// 会被渲染到router-view所在的位置第四步添加定义路由组件，如果有两个路由，添加两个组件 varUser = {template:'<div

2.5K2 0

2022 最新 Vue 3.0 面试题

4、相比传统的页面通过超链接实现页面的切换和跳转，Vue 使用路由不会刷新页面。...（必会） Vue-router 是 Vue.js 官方的路由插件，它和 vue.js 是深度集成的，适合用于构建单页面应用，vue 的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映...射起来，传统的页面应用，是用一些超链接来实现页面切换和跳转的，在 vue-router 单页面应用中，则是路径之间的切换，也就是组件的切换，路由模块的本质就是建立起 url 和页面之间的映射关系...中，并且可以在每个组件中使用 2、现在我们知道了可以通过动态路由传参，在路由中设置了，多段路径参数后，对应的值分别都会设置到 router.query 和$router.params 中 46、JQuery...的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如 history 对象，经常用的跳转链接就可以用 this.router.push 会往 history 栈中添加一个新的记录。

1141 0

2020前端技术面试必备Vue:(二)Router篇

7244 0

「vue基础」Vue Router 使用指南上篇（文末送漂亮的 Vue 站点源码）

我们首先导入 Vue 本身和 Vue路由，因为路由是插件，必须在Vue对象中进行注册，这里我们使用 vue.use() 进行注册。接下来，我们创建了一个Router实例，并进行了相关初始化的配置。...Vue-router 配置路由初始化时，我们可以进行一些参数配置，如下所示： base：页面基础路径这个参数配置允许你所有的URL路径都是基于这个路径之下，比如你希望Vue项目站点，都位于 www.example.com...服务端配置：如果你将项目部署到服务端，你需要了解一些基础的服务端配置，你可以参考这个链接：https://router.vuejs.org/guide/essentials/history-mode.html...3、页面渲染时传递参数，这个稍后会详细介绍到 ? redirect：页面重定向，将当前路径导向另外一个路径，如下代码所示： ? beforeEnter：我们可以定义进入这个路由之前执行的函数。...小节今天的内容就和大家分享到这里，今天我们一起学习了什么是Vue Router，并亲自动手创建了一个简单的路由项目，接着我们又进一步学习了Vue-router 配置及 Routes的相关配置，最后我们又学习了如何路由传参

1.1K4 0

17. vue-route详细介绍

vue-router官网: https://router.vuejs.org/zh/ vue-router是基于路由和组件的: 路由用于设定访问路径, 将路径和组件映射起来在vue-router的单页面应用中..., 页面的路径的改变就是组件的切换. 1....我们看到当点击用户的时候, 浏览器的url路径变为了/user/zhangsan. 第四步: 将参数传递到组件我们希望在user组件中显示, 欢迎{{用户名}}来到用户页面, 如何实现呢?...我们要在Home也添加子路由, 需要在路由里面增加一个children属性配置...., 路由到path路径 this.

5.5K2 0

Vue下路由History mode导致页面无法渲染的原因

用 Vue.js + vue-router 创建单页应用，是非常简单的。...使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router...，我并没有对路由进行任何处理，在Dev阶段一切都是正常的，可是打包之后，访问项目路径： sdp.driver.com/driver/ 会发现页面一片空白，但是静态文件都能够正常的引用，因为使用了YII中的模块...最后的页面效果： 404错误在History mode下，如果直接通过地址栏访问路径，那么会出现404错误，这是因为这是单页应用（废话）…其实是因为调用了history.pushState API...'); 好啦，这次关于Vue路由的“坑”就介绍到这里了，以后会发表更多的优质文章，如果对你有所帮助，请点击赞，谢谢发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/113680

7614 0

Vue-Router手把手教程

，完整的导航解析流程 7，路由元信息 8，过渡动效 9，滚动行为 10，完整路由配置最近在重温vue全家桶，再看一遍感觉记忆更深刻，所以专门记录一下（本文vue-router版本为v3.x）。...作为参数 // return 重定向的字符串路径/路径对象 }} ] }) 4，路由别名路由访问/b时，URL会保持为/b，但是路由匹配则为/a const router...，则重置到from的地址 next(‘/’) 中断当前跳转并到其他地址，可设置路由对象 next(error) 导航终止并传递错误给onError() const router = new VueRouter...首先导入Vue和vue-router，然后使用router，定义路由信息集合，每个路由都是一个对象，对象拥有如下属性属性类型值 path String 组件路径信息 name String 组件命名...} ] } ] const router = new VueRouter({ mode: 'hash', routes }) export default router 注意：嵌套子路由必须在被嵌套的页面放置

1.5K1 0

浅入深出Vue：路由

路由的概念在计算机界中的历史大概可以追溯到OSI模型中的数据链路层与网络层中的定义。这里的定义大意是：在转发数据包时，根据数据包的目的地址进行寻址，从而将数据包发往指定的目的地。...为什么需要路由在以往的前端开发中，通常没有路由这一概念，这样就造成一个问题：前端是离散的，不可独立的（静态页面除外，它不需要上下文）。...但不可否认的是，在没有路由这一概念的情况下，前端确实显得不够灵活，跳转页面时随处可见的路径硬编码。url 即物理路径。为了完善前端开发，在后来的框架中，均引入了路由、控制器、视图等后端概念。...即我们想让哪些 url解析到哪些组件上去，来看看官方的例子： import Vue from 'vue' import Router from 'vue-router' import HelloWorld...还有一点最重要的需要注意：在子路由/嵌套路由的情况下，想要层层渲染到子路由/嵌套路由，必须在其上层路由对象的模板中，添加组件，让vue-router能继续往下渲染。

6355 0

vue-router源码分析

这是一篇集合了从如何查看 vue-router源码（v3.1.3），到 vue-router源码解析，以及扩展了相关涉及的知识点，科普了完整的导航解析流程图，一时读不完，建议收藏。...pathList：路由路径数组，存储所有的path pathMap：路由路径与路由记录的映射表，表示一个path到RouteRecord的映射关系 nameMap：路由名称与路由记录的映射表，表示name...，这个路由对象上记录当前路由的基本信息，以及路径匹配的路由记录，为路径切换、组件渲染提供了依据。...知识补充 hash模式和history模式的区别 vue-router 默认是hash模式，使用hash模式时，变更URL，页面不会重新加载，这种模式从ie6就有了，是一种很稳定的路由模式。...或者在路由配置里添加一个统一配置的错误页。

9883 0

vue面试题总结

的数据同步到view显出来，还负责吧view修改同步到Model。...参考链接1 参考链接2 参考链接3 ---- Vuex 13. vuex的工作流程组件应用state 组件调用dispatch发布到action里面，在action里面可以进行异步网络请求，然后commit...由于Vue项目是SPA应用（即单页面应用），nginx在跳转时会优先根据你请求的路径去寻找该路径下的index.html页面，而vue应用只有一个index.html文件放在项目根目录，所以要在 Nginx...【重点】Vue-Router实现路由懒加载（动态加载）应用场景参考把导入路由写成方法的形式，然后在配置路由映射的时候把component对应导入路由的方法，当路由被访问时才执行导入路由的方法例子：...【重点】路由跳转方法 push 和 repalce 的区别? 使用replace不会向history添加新记录，而是替换当天页面的history记录 32.

2531 0

（Vue全家桶）Vue-router

router-link制作导航制作链接需要标签，我们先来看一下它的语法。...[显示字段] to：是我们的导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成...from:路径跳转前的路径信息，也是一个对象的形式。...next:路由是否跳转，常用的有next(true)和next(false) 更换跳转路径next(path:'路径') 写在模板中的钩子函数 beforeRouteEnter：在路由进入前的钩子函数。...beforeRouteLeave：在路由离开前的钩子函数。

1K1 0

vue-router详解

大家好，又见面了，我是你们的朋友全栈君。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？...再通俗的说，vue-router就是WebApp的链接路径管理系统。 vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。...vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。...在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质就是建立起url和页面之间的映射关系。...，便会自动跳转到404页面六、参考文章 vue-router实现单页面路由原理 Vue.js——vue-router 60分钟快速入门技术胖的Vue-router视频教程作者：浪里行舟链接：

2.6K2 0

关于门户的前端权限控制

，路由层面、视图层面以及接口层面 1.路由层面一般SPA应用结合vue-router和vuex实现完成的一套路由体系，主要两种方式，一种是通过vue-router addRoutes 方法注入路由实现控制...，另外一个是直接通过vue-router beforeEach钩子限制路由跳转 1.1 router.beforeEach() beforeEach钩子函数就是在路由跳转前执行的，通过注册 router.beforeEach...钩子对路由的每次跳转进行管理，每次跳转都进行检查，如果目标路由不存再于基本路由和当前用户的用户路由中，则取消跳转，转为跳转错误页或登录页面在路由定义时添加meta的一个属性，来控制判断该页面是否需要登录权限...1.2 动态路由（DynamicRoutes）用来实现页面访问权限，动态路由通过router.addRoutes() ，来只挂载当前用户拥有权限的路由，如果用户直接访问未授权的路由，则会进入404...”，比如constantRoutes和 asyncRoutes router.beforeEach 添加 router.addRoutes 事件文档链接

9572 0

前端路由那些事

，服务器通过后端路由匹配之后根据不同URL返回不同页面，而前端路由则将浏览器与服务器交互(页面跳转的URL规则匹配)的任务交给前端来做 1.前端路由模式目前单页应用（SPA）成为目前前端应用的主流...，而大型单页应用的一个大特征是，由前端路由来控制页面的跳转，通过url的切换，在不请求服务器的前提，更新页面视图，这里以vue-router为例分析，前端路由模式主要包括两种：hash模式和history.../#/test 那么通过 location.hash 获取的hash值为 #/test 导致路由的变化无非是三种情况：刷新页面、浏览器返回操作、新链接跳转，下面是具体流程图?...你需要在Nginx配置文件添加重定向附上 history vue-router官方文档 location / { try_files $uri $uri/ /index.html; } Vue-router...有兴趣Vue-router关于history类的具体源码实现点我到达火箭 2.路由应用聊聊vue-router的一些应用场景 2.1 路由拦截路由拦截可以用来作为前端鉴权入口，比如判断是否是已登录状态

9863 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云