Vue前端开发-路由跳转及带参数跳转

在Vue 3中,由于没有实例化对象this,因此,无法通过this去访问 $route对象,而是通过导入一个名为 useRouter 的方法,执行这个方法后,返回一个路由对象,通过这个路由对象就可以获取到当前路由中的信息,包括参数的读取,接下来进行详细说明。

路由跳转

除了通过a标签进行路由跳转之外,还可以使用router-link标签实现跳转功能,它是一个全局的组件,可以直接在template 中使用,无需导入,编译后自动转成一个a标签,但它的功能比a标签更加灵活,直接在当前页中进行路由跳转,不会刷新页面,如下列代码:

csharp 复制代码
<router-link to="/list">学校首页</router-link>

它等价于如下代码:

csharp 复制代码
<a href="/list">学校首页</a>

除使用超级链接标签进行路由跳转外,还可以在代码中,通过路由对象 router进行页面之前的相互跳转,在模板中的如下代码所示:

csharp 复制代码
<div @click="router.push({name:'list'})">
    学校首页
</div>

其中,router 对象必须先导入,再调用,才能在模板中直接使用,代码如下所示:

csharp 复制代码
import {useRouter} from "vue-router"
export default {
  name: "App",
  data(){
    return{
      router:useRouter()
    }
  }
}

**注意:**从路由模块中导入的必须是useRouter 方法,只有在调用这个方法之后的 router对象中才可以使用push方法,push方法的本质是向当前的路由栈中再添加一个新的路由记录,并根据这个记录进行路由切换,从而实现页面跳转的功能。

带参数跳转

在路由跳转时,还可以携带参数进入目标页,跳转标签和方式不同,携带参数的格式也不一样,如果是一个a标签携带参数跳转,那么它的携带参数的格式如下代码所示:

csharp 复制代码
  <a href="/list?gradeId=1001">一年级</a>

上述代码采用查询字符串方式携带参数,即问号后携带参数,还可以在路径中使用配置项指定的格式携带参数,如下代码所示:

csharp 复制代码
  <a href="/list/1001">一年级</a>

上述代码中,/1001是配置时指定的格式,1001是一个名为gradeId的变量值,这个带参数跳转方式需要在路由配置中设置,代码如下所示:

csharp 复制代码
{
       path: '/list/:gradeId',
       name: 'list2',
       component: () => import('../views/list.vue')
   }

在上述代码中,path属性设置路径时,可以通过变量gradeId带参数跳转,这样设置后,在目标页中,就可以通过路由对象中的 params.gradeId格式获取到携带的参数。

除使用a标签携带参数跳转外,还可以使用 router-link 和其他标签携带参数跳转,如果是router-link,那么,它的跳转格式如下代码所示:

csharp 复制代码
 <router-link :to="{
    name: 'list2',
    params: {
      gradeId: 1001
    }}">一年级</router-link>

如果是其他的元素,由于没有to或href属性,只能调用单击事件进行携带参数的跳转,上述代码改成 div标签跳转,则修改后的代码如下所示:

csharp 复制代码
<div @click="router.push({
    name: 'list2',
    params: {
      gradeId: 1001
    }
  })">一年级</div>
相关推荐
FuckPatience12 分钟前
Vue 与.Net Core WebApi交互时路由初探
前端·javascript·vue.js
aklry1 小时前
elpis之学习总结
前端·vue.js
FuckPatience3 小时前
Vue ASP.Net Core WebApi 前后端传参
前端·javascript·vue.js
Komorebi_99993 小时前
Vue3 provide/inject 详细组件关系说明
前端·javascript·vue.js
Hilaku4 小时前
"事件委托"这个老古董,在现代React/Vue里还有用武之地吗?
前端·javascript·vue.js
向葭奔赴♡4 小时前
前端框架学习指南:提升开发效率
前端·javascript·vue.js
小高0074 小时前
🔥🔥🔥Vue 3.5 核弹级小补丁:useTemplateRef 让 ref 一夜失业?
前端·javascript·vue.js
中微子5 小时前
Vue 2 与 Vue 3 组件写法对比
前端·javascript·vue.js
中微子5 小时前
Vue 3 JavaScript 最佳实践指南
前端·javascript·vue.js
Keepreal4965 小时前
使用 Three.js 和 GSAP 动画库实现3D 名字抽奖
javascript·vue.js·three.js