vue3.x路由的跳转 get传值

了解vue2.x的小伙伴相信对路由跳转传值并不陌生，今天小编带给大家的是vue3.x的路由跳转传值，闲话少说直接来代码。

首先准备一个模板结构

上一篇文章讲了路由的安装以及基本原理，在这里就不做啰嗦了，下面为目录组件基本结构，直接新建组件，都是接下来需要用到的。

修改路由router.ts文件如下

引入需要跳转的路由，在路由文件的结尾处用反斜杠加冒号加参数代表动态参数（/newsDetails/:id）

// 引入路由组件
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

在news组件中新建需要跳转的目录结构

<template>
<div class=''>
  news
  <hr>
  <ul >
    <li v-for="(item,index) in list" :key="index">
      <router-link :to="'/newsDetails/' + index">{{item}}</router-link>
    </li>
  </ul>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

// data 数据接口 
interface News {
  list:string[]
}

export default defineComponent({
data (){
  return {
    list:['武汉','北京','上海','深圳','广州']
  } as News;
},
mounted() {
  for(let i=0;i++;i<10){
    this.list.push(`我是第${i}条新闻`)
  }
},

})
</script>
<style lang='less' scoped>
</style>

上述代码在页面中的展示形式（如下图）

点击其中任意一个链接之后的路由为下图所示

上面案例就是路由的跳转与get传参的方式，当然这只是路由传参的一种方法，还有其他的方法，我将会在后面的文章中一一为大家列出来希望能够让你找到你想要的。