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

 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>