vue路由传参

第一种用的比较简单的是直接router下的index里面path后面加入id

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,

  },
  {
    path: '/about/:id',  //这里的id
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

跳转的页面

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about/1">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

用的编程时路由跳转传参 用的query

<script>
export default {
  data() {
    return {
      
    };
  },
  mounted() {
    
  },
  methods: {
      // query 是浏览器上面地址栏可以显示出来
      // 通过path 传参
     goto(){
      //  this.$router.push({
      //    path : "/About",
      //    query:{
      //       id:3,
      //       name : 5
      //    }
      //  })
   //  params 浏览器上面地址显示不出来
   // 通过name  传参  ， 在跳转页面的那边created 输出 this.$route  可以看见参数
      this.$router.push({
         name:"about",
         params:{
           id:3,
           name:7
         }
      })

     }
  }
};
</script>

router-link 页可以这种

     <router-link  :to="{path:'/about',query:{name:scz,age:10}}">about</router-link> |