解决Vue配置路由不生效，自动跳转到首页

最新推荐文章于 2024-01-22 11:43:47 发布
最新推荐文章于 2024-01-22 11:43:47 发布
阅读量9k 收藏 3
点赞数 7
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43948440/article/details/110560205
版权

记录一下在使用Vue时候配置路由不起作用，每次自动跳转到首页的问题。
查了之后才发现，Vue默认情况下需要在访问路径下添加#再加路由的path值。
在这里插入图片描述
只要在配置路由时候设置history就可以不加#了：
在这里插入图片描述

在这里插入图片描述
记录：
Vue-router 中有hash模式和history模式，vue的路由默认是hash模式，一般开发的单页应用的URL都会带有#号的hash模式。

扶我起来，我要学java
关注
  • 7
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
解决vue 路由变化页面数据不刷新的问题
08-27
下面小编就为大家分享一篇解决vue 路由变化页面数据不刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue单页路由跳转后scrollTop的问题
10-18
今天小编就为大家分享一篇解决vue单页路由跳转后scrollTop的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue动态路由异步加载import组件,加载不到module的问题
10-15
主要介绍了解决vue动态路由异步加载import组件,加载不到module的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue项目中路由跳转不生效
最新发布
jinkunqingning的博客
01-22 730
初学vue，自己新建了一个项目，但是很奇怪的是，配置明明都是正确的，但是点击按钮跳转不生效。然后就是查看你的首页是不是直接写到app.vue里面了，如果是的话，那就寄了。首先是确保跳转的地址和路径是完全正确的。
vue相同路由跳转强制刷新该路由组件操作
10-14
主要介绍了vue相同路由跳转强制刷新该路由组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue+router路由跳转不起作用的一项原因
11-20
如下所示： Vue.use(Router) export default new Router({ mode:'history', routes: [ { path: '/', component: Login }, { path: '/login', component: Login }, { path: '/register',component: Register}, {path: '/*', component: NotFound}, ] }) 记得要写上 mode:’history’, 原因如下 补充知识：vue-router配置后地址栏输入跳转不
vue-router不生效
qq_53719087的博客
09-20 1331
请确保您的路由链接指向正确的路径。如果您使用了HTML5 history模式，请确保您的服务器已经正确配置。没有正确安装和配置Vue Router。请确保您已经按照官方文档正确安装和配置了Vue Router。您的组件没有正确引入。请确保您的组件被正确引入到Vue实例中，以便路由可以正确匹配到组件。如果您仍然无法解决问题，请提供更多详细信息，以便我们可以更好地帮助您解决问题。请仔细检查您的路由配置，确保路径和组件名称都正确。
关于解决vue路由不起作用的解决方案
热门推荐
weixin_39289234的博客
06-30 2万+
最新学习vue js,发现路由配置后不起作用，每次都是重定向到首页，多次怀疑是路由写错了，后来发现vue默认情况下,访问子组件需要在uri后面添加#再加路由path值才可以，后来发现需要在路由文件里面设置history就没问题了。// 引用模板 import Vue from 'vue'; import Router from 'vue-router'; import Hello from '.....
Vue-router不生效的原因
YXh1412278770的博客
12-12 1258
要要注意的是，<router-view>必须放在需要跳转组件的前面。如果<router-view>在<home-page>的后面，跳转将不会生效。2.是否映入router-view。1.正确引入vue-router。
vue-router没有效果的问题解决之一
前端少年
09-06 1万+
最近在学习vue,刚好学到vue-router，按照视频敲的代码，就是没有出现想要的页面。最后上网查了下，才知道原因。 一：vue-router的安装： 方式1：在 初始化目录的时候,vue会提醒你安装vue-router，可以在这 个时候安装vue-loader 方式2：在终端进入项目，输入 npm install vue-router –save 也会安
Vue学习笔记（八）——router绑定事件不生效的解决方案
讨厌走开啦
04-02 2788
参考文档一：https://cn.vuejs.org/v2/guide/ 参考文档二：https://www.cnblogs.com/minghui007/p/7263177.html 对初学者来说，使用路由后遇到的第一个问题通常是尝试在路由跳转时执行定义的函数，但是发现路由跳转时函数没有执行，类似下面这样的代码： <!DOCTYPE html> <html lang="en"&...
【Vue】Router路由无法跳转问题整理
Sheldon74的博客
09-08 7040
Vue Router路由无效或异常等问题整理
vue地址栏直接输入路由无效问题
前端很忙
11-14 1万+
vue路由跳转，vue手动输入路由跳转
vue打包后空白路由失效（脚手架3的处理方法）
weixin_44341126的博客
10-06 1988
vue脚手架打包后空白路由失效 在项目下面创建一个vue.config.js的文件，和src同目录，只能是这个名字。 module.exports = { assetsDir: 'static', parallel: false, publicPath: './', } 更改路由下面的index.js的路由配置文件。把路由模式从history改为hash模式 const router = new VueRouter({ mode:'hash', routes }) expo
vue-router4.0动态路由失效问题
壮乡码农
12-02 1万+
问题描述： vue-router4.0 版本在beforeEach使用addRouter动态添加路由后，路由没有生效。控制台发出警告[Vue Router warn]: No match found for location with path "/home"，使用roter.getRoutes()查看已经挂载的路有也已经挂载上去 解决方法： 查看官网，官网在addRoute 方法下有一条提示： 请注意，添加路由并不会触发新的导航。也就是说，除非触发新的导航，否则不会显示所添加的路由。 这句.
Vue3中使用路由常见问题的解决方案
m0_61998604的博客
05-09 2011
Vue3是目前前端界最流行的开发框架之一，其中Vue Router是Vue3中非常重要的一部分。尽管Vue Router相对简单易用，但是在使用过程中还是会遇到一些问题，例如： 如何在Vue3中使用路由？ 如何在Vue3中动态传递路由参数？ 如何在Vue3中实现页面的切换效果？ 在本文中，我们将为您提供一些解决这些问题的解决方案。
关于vue脚手架一个页面刷新页码或者直接房屋url跳回首页的问题
lsh499742959的专栏
05-19 522
关于vue脚手架一个页面刷新页码或者直接房屋url跳回首页的问题
Vue 结合 Axios 接口超时统一处理
細水、長流√的专栏
11-27 2028
引语：当网路慢的时候。又或者公司服务器不在内地的时候，接口数据请求不回来超时报错的情况相信大家肯定遇到过的，这里我把我公司项目请求超时的处理方法分享下，希望看过后有帮助。 axios基本用法就不多说了，详情直戳 : https://www.kancloud.cn/yunye/axios/234845 主要是思路： 对 axios 请求拦截器下功夫 解决方案一：（缺点：只重新请求1次，如果再超...
vuerouter路由实现网易云跳转
09-02
要实现网易云跳转，你可以使用 Vue Router 来管理路由跳转。首先，确保你已经安装了 Vue Router，并在你的项目中引入它。 接下来，在你的路由配置文件中（通常是 `router/index.js`），你可以添加一个路由规则来实现网易云的跳转。例如，假设你想要实现一个 `/music` 的路由，用于跳转到网易云音乐页面，你可以像这样配置路由： ```javascript import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const routes = [ // 其他路由配置... { path: '/music', beforeEnter() { window.location.href = 'https://music.163.com'; // 在这里设置跳转的网址 } } ]; const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }); export default router; ``` 在上面的代码中，我们创建了一个 `/music` 的路由，并在 `beforeEnter` 导航守卫中设置了一个跳转到网易云音乐页面的动作。通过设置 `window.location.href` 来改变当前浏览器窗口的 URL。 这样，当用户访问 `/music` 路径时，就会自动跳转到网易云音乐页面。 记得将这个路由配置文件导入到你的主入口文件中，以确保它生效： ```javascript import Vue from 'vue'; import App from './App.vue'; import router from './router'; Vue.config.productionTip = false; new Vue({ router, render: h => h(App) }).$mount('#app'); ``` 以上就是使用 Vue Router 实现网易云跳转的方式。你可以根据需要修改路由的路径和跳转的网址。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值