Vue router错误跳转到首页("/")的问题及解决

 更新时间:2023年10月07日 10:25:24   作者:CodingBugs  
这篇文章主要介绍了Vue router错误跳转到首页("/")的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Vue router错误跳转到首页("/")

Vue通过this.$router.push方法进行页面的跳转主要有两种方式

// router/index.js
const routes = [{
        path: "/",
        name: "login",
        component: Login
    }, { 
        path: "/index",
        name: "index"
        component: Index
    }
]
①this.$router.push({path: "/index", query: {id: "1", name: "one"}})
②this.$router.psuh({name: "login", params: {id: "2", name: "two"}})

两种方法一个指定路径,一个指定组件名

path对应router中path, name对应router中的name,一一对应

path配合query, name配合params

如果path指定的路径在router/index.js中不存在地址栏会跳转但无法加载出内容

而name指定的名称在router/index.js中不存在会导致默认跳转到"/"

Vue router 路由跳转方法概述

一、概述

使用到Vue的项目,我们最常见使用的就是Vue配套的Vue Router库。

那么在平日开发中,有多少种跳转路由的方法?

二、跳转方法

1、使用router-link标签

使用router-link标签,我们通常会使用到2个参数,最常用的就是to参数

to参数,表示你想要跳转到的路由对象

router-link标签,会调用router.push()方法,该方法会在你点击浏览器会退按钮的时候,无痕回退一个路由。

可以是路由路径

<router-link to="/home">Home</router-link>
<router-link :to="'/home'">Home</router-link>

也可以是路由对象,甚至还可以为其携带参数

<router-link :to="{ path: '/home' }">Home</router-link>
<router-link :to="{ name: 'user', params: { userId: '123' }}">User</router-link>
<router-link :to="{ path: '/register', query: { plan: 'private' }}">
  Register
</router-link>

2、使用router-replace

设置 replace 属性的话,当点击时,会调用 router.replace(),而不是 router.push(),所以导航后不会留下历史记录。

<router-link to="/abc" replace></router-link>

3、使用router-push

方法1和2是使用html的方法来调用,对应的,也有使用js代码来控制路由的方法

router.push('/users/eduardo')
router.push({ path: '/users/eduardo' })
router.push({ name: 'user', params: { username: 'eduardo' } })
router.push({ path: '/register', query: { plan: 'private' } })
router.push({ path: '/about', hash: '#team' })

三、路由中params和query的区别

在上述代码中, 发现给路由传递参数,有params和query两个不同的方式,他们的区别又是什么 ?

query是什么?

从 URL 的 search 部分提取的已解码查询参数的字典。就是地址中?后面的内容,不过是已经解析的。

params是什么?

从 path 中提取的已解码参数字典。就是vue路由中的路径参数

如下方代码中的**id **字段,就是路径参数,当使用params的时候,就可以获取到。

const routes = [
  { path: '/users/:id', component: User },
]

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue如何实现简易的弹出框

    vue如何实现简易的弹出框

    这篇文章主要介绍了vue如何实现简易的弹出框,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue项目中如何实现网页的截图功能 (html2canvas)

    vue项目中如何实现网页的截图功能 (html2canvas)

    这篇文章主要介绍了vue项目中如何实现网页的截图功能 (html2canvas),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • 5分钟学会Vue动画效果(小结)

    5分钟学会Vue动画效果(小结)

    这篇文章主要介绍了5分钟学会Vue动画效果(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 关于Vue背景图打包之后访问路径错误问题的解决

    关于Vue背景图打包之后访问路径错误问题的解决

    本篇文章主要介绍了关于Vue背景图打包之后访问路径错误问题的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue2.* element tabs tab-pane 动态加载组件操作

    vue2.* element tabs tab-pane 动态加载组件操作

    这篇文章主要介绍了vue2.* element tabs tab-pane 动态加载组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 如何使用yarn创建vite项目+vue3

    如何使用yarn创建vite项目+vue3

    这篇文章主要介绍了如何使用yarn创建vite项目+vue3,详细介绍了使用vite创建vue3过程,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • vue3引入uview-plus3.0移动组件库的流程

    vue3引入uview-plus3.0移动组件库的流程

    这篇文章主要介绍了vue3引入uview-plus3.0移动组件库的流程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • vue2.0父子组件间传递数据的方法

    vue2.0父子组件间传递数据的方法

    本文通过一个小例子给大家介绍了vue2.0父子组件间传递数据的方法,需要的朋友参考下吧
    2018-08-08
  • vue-cli如何快速构建vue项目

    vue-cli如何快速构建vue项目

    本篇文章主要介绍了vue-cli如何快速构建vue项目,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • 浅谈vue权限管理实现及流程

    浅谈vue权限管理实现及流程

    这篇文章主要介绍了浅谈vue权限管理实现及流程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04

最新评论