VUE-JS跳转路由（编程式路由）及history模式

最新推荐文章于 2025-05-21 12:33:06 发布
最新推荐文章于 2025-05-21 12:33:06 发布
阅读量2k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Aro_HAN/article/details/80573230
博客介绍了index.js的配置情况，还提及JS跳转路由（编程式路由），并特别指出是history模式，属于前端开发中关于路由配置和跳转的相关内容。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

index.js配置如下

JS跳转路由（编程式路由）：


history模式：


Vue - Vue Router 路由跳转及传参方式（声明 / 编程式路由及路由工具函数）
资深程序员
01-15 1814
在vue中，路由跳转实际上您可以理解为指向，可跳转至对应的页面。 它分为两种方式，如下代码所示： <!--声明式路由--> <router-link:to="{name:'XXX'}">声明式路由</router-link> //编程式路由 this.$router.push({name:'XXX'}) 声明式路由 它只是使用场景不同而已，它在内
Vue2---router实现路由跳转
AZURE060606的博客
05-02 1236
而跳转的路径要以router/index.js中的path为准。现在访问active路径就可以显示Active组件了。所谓路由，就是将一个个组件映射到不同的路由url中。首先要将App内的内容换成router-view。现在去注册路由，还是以上面的Active组件为例。
js设计模式:路由模式
m0_54741495的博客
02-21 790
js设计模式:路由模式
18. Vue.js路由模式
UnityAlvin
09-05 218
路由模式 路由模式有两种 hash：路径带 # 符号，如 http://localhost/#/login（默认） history：路径不带 # 符号，如http://localhost/login 修改路由配置 index.js export default new Router({ mode:'history' })
【Vue3】一文学会动态路由和编程式路由的使用
最新发布
麻辣香蝈蝈的博客
05-21 917
本文深入探讨了Vue3与Vite框架下的动态路由和编程式路由的实现方法。文章通过代码示例详细展示了两种传参方式的操作步骤和渲染过程，并总结了它们的主要区别：动态路径传参需要在路由中定义参数，而键值对传参则直接传递参数。
js 实现路由功能
weixin_30342827的博客
07-10 251
class Router { 　　constructor() { 　　　　this.routes = [] 　　} 　　handle(pattern, handler) { 　　　　this.routes.push({ pattern, handler }) 　　} 　　exec(pathname) { 　　　　for (const route of this.routes) { ...
JavaScript的路由
ITjun666的博客
11-07 2075
JavaScript的hash路由和history的实现方式!
vuejs中路由器的两种模式-哈希模式与历史模式
itclanCoder
08-05 2821
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号（ID：itclanCoder）如果不知道如何操作点击这里,标星不迷路前言路由器分别有两种模式,一种是hash模式,另一种是history模式,在使用vue-cli以及vue-router默认搭建的vue项目,如果不做特殊的配置...
解决vue-router 嵌套路由没反应的问题
10-14
在Vue.js应用中，Vue Router是官方推荐的路由管理库，用于处理页面的导航和视图切换。在本文中，我们将深入探讨如何解决Vue Router中嵌套路由无响应的问题，以便更好地理解和应用这一强大功能。 首先，让我们回顾...
Vue.js实战之利用vue-router实现跳转页面
10-20
Vue.js实战中使用vue-router实现页面跳转是单页应用开发的核心技术之一。单页应用（SPA）的特点是只有一个HTML页面，通过动态改变视图而不重新加载页面来提供用户体验。而vue-router是Vue.js官方提供的路由管理器，...
vue-router路由参数刷新消失的问题解决方法
01-21
场景：vue-router实现的单页应用，登录页调用登录接口后，服务器返回用户信息，然后通过router.push({name: ‘index’, params: res.data})传给主页组件，并在主页显示数据。但是刷新页面后，数据就消失了。 解决...
解决vue router使用 history 模式刷新后404问题
12-09
因为我们的应用是单页客户端应用，当使用 history 模式时，URL 就像正常的 url，可以直接访问http://www.xxx.com/user/id，但是因为vue-router设置的路径不是真实存在的路径，所以刷新就会返回404错误。 想要history模式正常访问，还需要后台配置支持。要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。 也就是在服务端修改404错误页面的配置路径，让其指向到index.html。 警告： 因为这么做以后，你的服务器就不再返回 404 错误页面
【vue-router】---原生js实现两种路由模式
热门推荐
qq_53061847的博客
05-28 1万+
目录 一、hash模式 二、history模式 三、hash模式和history模式的区别 我们在vue中用的路由其实也是用原生的js封装的，本文总结两种路由模式的原生写法，总结两者的实现的原理和区别 Vue两种前端路由（hash模式和history模式）实现原理解析及区别 一、hash模式 hash值变化浏览器不会重新发起请求，但是会触发window.hashChange事件，假如我们在hashChange事件中获取当前的hash值，并根据hash值来修改页面内容，则达到了前端路由的目的
Vue.js【路由】
weixin_74878822的博客
05-08 1602
在src目录下创建Home.vue文件和About.vue文件。-- Home.vue文件 -->Home组件-- About.vue文件 -->About组件使用标签定义路由视图，该标签会被渲染成当前路由对应的组件。通过标签定义路由链接方便在不同组件之间切换。App根组件
解决vue路由history模式刷新后404的问题
weixin_33816821的博客
07-10 824
server { listen 8888;#默认端口是80，如果端口没被占用可以不用修改 server_name localhost; root E:/vue/my_project/dist;#vue项目的打包后的dist location / { try_files ...
前端路由模拟（hash值、history、Vue）
qq_45593068的博客
04-23 329
前端路由模拟（hash值、Vue） 创建三个简易的子组件 <script type="text/x-template" id="home"> <div> <h1>home</h1> </div> </script> <script type="text/x-template" ...
vue 路由跳转出的错误
小白成长记
12-09 880
vue NavigationDuplicated: Avoided redundant navigation to current location: "/template" 报错原因： 路由设置为子路由，页面里直接页面跳转。 其实是一个低级错误，向子路由跳转，父级页面要写 <router-view> ...
vue路由跳转的四种方法
weixin_57913339的博客
04-18 730
this.$router.replace 跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)this.$router.push 跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面。this.$router.go(n) 向前或者向后跳转n个页面，n可为正整数或负整数。this.$router.replace() (用法同push)this.$router.push() (函数里面调用)
【JavaScript】前端路由原理之 hash 模式和 history 模式
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
09-10 159
什么是路由？ 个人理解路由就是浏览器 URL 和页面内容的一种映射关系。 比如你看到我这篇博客，博客的链接是一个 URL，而 URL 对应的就是我这篇博客的网页内容，这二者之间的映射关系就是路由。 其中路由又分为前端路由和后端路由，由于目前是大部门开发模式都是前后端分离开发模式，其大部分应用都是 SPA(simple Page Application，单页面应用)，个人的工作也是由后端提供API...
vue-router跳转传参编程式
12-31
### 使用 Vue Router 进行编程式导航并传递参数 在 Vue.js 应用程序中，通过 `vue-router` 实现编程式导航可以灵活控制页面之间的跳转逻辑。编程式导航允许开发者通过 JavaScript 方法触发路由变化，而不是依赖于 `<router-link>` 组件。 #### 编程式导航基础 为了执行编程式导航，通常会使用 `$router.push()` 或者其他类似的 API 函数[^2]。这些方法能够改变当前的应用路径而无需重新加载整个页面。 #### 路由配置示例 下面是一个简单的路由配置例子，在此配置基础上展示如何进行带参的编程式导航： ```javascript import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const routes = [ { path: '/', name: 'Home', redirect: '/userList' }, { path: '/userList', name: 'UserList', component: () => import('../views/user/UserList') // 动态导入组件 }, { path: '/user/:id', // 定义动态段 :id 来接收参数 name: 'UserProfile', component: () => import('../views/user/UserProfile'), props: true // 启用将 URL 参数作为 prop 自动绑定给目标组件的功能 } ]; export default new VueRouter({ mode: 'history', // 移除URL中的# base: process.env.BASE_URL, routes }); ``` #### 编程式导航与传参实践 假设有一个场景是从用户列表页(UserList)点击某个用户的链接进入该用户的个人资料页(UserProfile)，此时可以通过编程方式携带用户ID(`userId`)前往指定的目标路由。 ##### 方案一：利用 params 传递单个 ID 值 当定义好带有冒号前缀的动态部分 `/user/:id` 的时候，就可以很方便地向 UserProfile 页面发送特定 id 的值了。 ```javascript // 在 UserList.vue 文件内某处触发事件处理函数 methods: { goToUserProfile(userId){ this.$router.push({ name: 'UserProfile', params: { id: userId } // 将 userId 作为 param 发送出去 }); } } ``` 注意这里使用的是命名路由的形式 (`name:'UserProfile'`) 并且指定了要传送的具体参数名和对应的变量值。 如果希望直接操作路径字符串，则应采用如下形式： ```javascript this.$router.push(`/user/${userId}`); ``` 但是这种方式下无法访问到 params 数据，除非再次解析 url 获取其中的信息。 ##### 方案二：借助 query 添加查询字符串 另一种常见的做法是在 URL 上附加查询参数，这使得 URL 更加直观易读，并且可以直接分享含有具体条件的链接地址。 ```javascript this.$router.push({ path: '/user/profile', query: { user_id: userId, action: 'view' } // 可以附带多个键值对 }); ``` 这样形成的最终 URL 类似于 `/user/profile?user_id=1&action=view` ，可以在任何地方轻松复制粘贴这个完整的 URL 访问相同的资源。 对于接收到参数的一方来说，无论是哪种情况都可以通过 `this.$route.params` 或者 `this.$route.query` 来获取相应的数据[^4]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值