Vue Router 新手入门指南(2):路由跳转的方法及如何携带参数

不同的页面通常对应着不同的路由。通过路由跳转,用户可以点击链接、按钮或执行特定的操作来切换到其他页面。这样做的好处是,可以根据不同的路由展示不同的内容,提供更好的用户体验和导航方式。

我们这里用到的代码示例接上篇文章《Vue Router 新手入门指南(1):路由怎么使用?》中创建的vue-router项目。

router-link

第一个就是我们之前已经用到的router-link标签啦,<router-link>是Vue Router提供的组件,它用于在单页面应用中实现路由跳转。你可以像使用普通的<a>标签链接一样使用<router-link>来进行页面之间的跳转。要加上to属性,值为你要跳去的页面的路径。

之后在页面上,就能点击首页就跳去首页的内容,点击沸点就跳去沸点的内容啦。

编程式路由跳转

第二种方法就是使用编程式路由跳转,通过this.$router.push()来跳。怎么使用呢?我们来看 :

我们来到我们创建的沸点页面Hot.vue文件中,在它的内容中加一个button按钮,内容为"去课程页面",给按钮绑定一个点击事件goClassPage。然后我们要到script中去定义这个方法,在这个方法中添加this.$router.push('/class'):

xml 复制代码
<template>
    <div>
        <h2>沸点页面</h2>
        <button @click="goClassPage">去课程页面</button>
    </div>
</template>

<script>
    export default {
       methods:{
          goClassPage(){
             this.$router.push('/class')
          } 
       } 
    }
</script>

<style lang="css" scoped>
</style>

那么现在我们去到页面上看,点击按钮也能去到课程页面了:

携带参数跳路由

需要携带参数跳路由会出现在什么场景呢?比如说你登录后跳转的页面需要根据你的信息来渲染,就像购物车里你添加了什么东西等等,那么就需要获取你的用户信息,从哪获取呢?就是你登录的时候输入的账号。

携带参数跳路由用到了我们说的第二种方法,且也有两种方式。

query

写法如下,path是我们想要跳去的页面,id是我们要带过去的参数:

php 复制代码
this.$router.push({path: '/class',query: {id: 123 }})

这样写后,我们能看到页面的地址栏就会带上我们传的id:

要在课程页面拿到我们传的参数需要在Class.vue中这么写,{{$route.query.id}},注意是route,而我们之前传的时候是router:

xml 复制代码
<template>
    <div>
        <h2>课程页面</h2>
        <h3>{{$route.query.id}}</h3>
    </div>
</template>

现在从沸点页面点击按钮跳转到课程页面就能看到它已经出现了:

params

这种方式就需要到路由配置文件,router目录下的index.js里来,在配置课程页面的对象中,加一个name属性,值为class,path属性的值后加上/:id,然后在Hot.vue中跳路由的时候,把path: '/class'改为name: 'class',然后用params:{ id: 456 }带上参数:

php 复制代码
 this.$router.push({name:'class',params:{id:456}})
 

要在课程页面拿到就要写{{ $route.params.id }}

xml 复制代码
<template>
    <div>
        <h2>课程页面</h2>
        <h3>{{ $route.params.id }}</h3>
    </div>
</template>

此时点击按钮去到课程页面效果如下:

本文的知识到这就讲完啦,欢迎下次再来一起学习ヾ(◍°∇°◍)ノ゙!!

相关推荐
岁忧13 分钟前
(LeetCode 面试经典 150 题 ) 11. 盛最多水的容器 (贪心+双指针)
java·c++·算法·leetcode·面试·go
一斤代码42 分钟前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子44 分钟前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子1 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina1 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路2 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js