Vue3+ts实现页面跳转及参数传递

2023-12-13 06:04:49

## 列表页

<script lang="ts" setup>
import { reactive, toRefs } from 'vue'
// 1 引入useRouter路由信息方法
import { useRouter } from 'vue-router'
// 2 获取实例
const router = useRouter()

const gotoDetail  = (index: string) =>  {
  router.push({
    path: '/demo2',
    query: {
      id: index
    }
  })
}

</script>

##?详情页

<script lang="ts" setup >
import {ref, reactive, toRefs,onMounted} from 'vue'
// 1 引入useRouter路由信息方法
import { useRoute } from 'vue-router'
// 2 获取实例
const route = useRoute()

const { id,name } = route.query

      // 获取列表
  const getDetail = async (id: string) => {
    try {
      const { data } = await GetDetail(id)
      console.log(data)
      msg.value = data
    } catch (error) {
      showFailToast("请求失败")
    }
  }
  
  onMounted( async () => {
      const { id } = route.query
      console.log("messageId"+id+",name"+name)
      const res = await getDetail(id+"")
   })
  
  </script>

useRouter():

router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象和属性。

router.push({path:‘home’});本质是向history栈中添加一个路由,在我们看来是 切换路由,但本质是在添加一个history记录,? query: {id: index} 绑定参数。

useRoute()

route是一个跳转的路由对象,每一个路由都会有一个route对象,是一个局部的对象,可以获取对应的name,path,params,query等:

query: 对象,包含路由中查询参数的键值对。 例如,对于 /detail?id=1 ,通过route.query可以获取到id的值

onMounted

是一个生命周期钩子函数,用于在组件挂载到 DOM 上之后执行一些操作,onMounted?钩子是通过 setup函数来使用的。<script?setup >是一种语法糖写法,比普通的?<script>?语法更有优势。

文章来源:https://blog.csdn.net/weixin_40027906/article/details/134949254
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。