VUE-编程式导航，动态路由，使用params传参

最新推荐文章于 2025-07-05 15:39:45 发布

原创最新推荐文章于 2025-07-05 15:39:45 发布 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

VUE 专栏收录该内容

83 篇文章

订阅专栏

博客介绍了Vue中从one.vue界面跳转到detail.vue界面显示详情的实现方法。包括路由地址，关键点有在路由文件导入组件、定义路由规则，one.vue设置点击方法，还提及实现跳转的三种方式及注意事项，最后说明detail.vue获取路由id。

one.vue界面显示每项数据，点击任意一项，跳转到detail.vue界面显示该项的详情

路由地址地址：http://IP:port/#/one ——>http://IP:port/#/detail/3

关键点：

1、在路由文件中导入组件

import Detail from './views/analysisWC/syntheticalAnalysisWC/detail.vue'

2、定义路由规则，注意： path: '/detail/:id'

{
                    path: '/detail/:id',
                    name: 'detail',
                    component: Detail,
                    meta: {
                        title: '详情'
                    }
},

3、one.vue界面中设置点击方法 goTo(item.id)

 <li v-for="item in list" :key="item.id" @click="goTo(item.id)">name:{{item.name}}=======age:{{item.age}}</li>

实现跳转的三种方式，

this.$router.push( " path " )	字符串形式的路径
this.$router.push( { path: '' path " } )	对象形式的路径
this.$router.push( { name : " detail ", params : { id } } )	name+params形式

注意：path和params不能一起使用，要么是path，要么是name+params形式



    goTo(id){
      console.log(this)
      // 字符串
      // this.$router.push("/detail/"+id);
      // 对象
      // this.$router.push({ path: "/detail/"+id});
      // 命名的路由,带参数
      this.$router.push({ name: "detail", params: { id } });
      // 待查询参数，变成/
      // this.$router.push({ name: "detail", params: { id } });
    }

4、detail.vue界面获取路由id

<template>
  <div class="root">
    详情界面 -------======{{id}}
  </div>
</template>
<script>
export default {
  data() {
    return {
      id:this.$route.params.id  //获取路由传递过来的id
    };
  },
  methods: {},
};
</script>
</style>