vue3.x通过js跳转传值 编程式导航

上一篇给大家介绍了利用router-link路由跳转，今天小编给大家说一下编程式导航（js跳转路由传值）的方法。

路由注册

在router.ts里面进行路由注册

// 引入路由组件
import { createRouter,createWebHashHistory } from "vue-router";

// 引入组件
import Home from '../components/Home.vue'
import News from '../components/news.vue'
import User from '../components/user.vue'
import NewsDetails from '../components/newsDetails.vue'

// 配置路由
const router= createRouter({
  history: createWebHashHistory(),
  routes:[
    {path:'/',component:Home},
    {path:'/news',component:News},
    {path:'/user',component:User},
    {path:'/newsDetails/:id',component:NewsDetails},
  ],
})

// 暴露路由
export default router

编程式跳转路由比较简单直接上代码

下面是代码模板

<template>
<div class='details'>
  页面详情
  <button @click="goHome">跳转路由跳转home</button>
</div>
</template>
<script>
export default {
name: '',
methods: {
  goHome(){
    // 编程式导航 js跳转路由
    this.$router.push({
      path:'/home'
    })
  }
},
}
</script>
<style lang='less' scoped>
</style>

跳转传值的写法

query后面的对象就是传值

// 第一种
this.$router.push({
      path:'/home',query:{id:14}
    })
    
//也可以直接在路由地址后面写
this.$router.push({
      path:'/home?id=14'
    })
    
// 动态路由传值
this.$router.push({
      path:'/home/123'
    })

主要是通过this.$router.push的方式进行路由的跳转，你看懂了吗？