Vue router传递参数的方式(简单使用)

params 传参

router.js

...
 {
    path: "/user/:id", // path后面要加上参数
    name: "user", // name是必须的
    component: () => import("../views/User") //懒加载组件
}
...

User.vue

//组件中
  <router-link to="/user/123"> 跳转</router-link>  
  <router-link :to="{ name: 'user', params: { id: 123 }}"> 跳转</router-link>
//点击事件中
  this.$router.push({
    name: "user",
    params: {
        id: '123' //id的值
      }
  });

点击后路由效果为：

http://localhost:8080/#/user/123

页面中获取参数

this.$route.params.id

跳转时候的值

router.beforeEach((to, from, next) => {
    console.log(to.fullPath)    //  '/user/123'
    console.log(to.path)        //  '/user/123'
})

query传参

router.js

...
 {
    path: "user",
    component: () => import("../views/User") //懒加载组件
}
...

User.vue

//组件中
<router-link :to="{ path:'/user', query: { id: 123} }"> 跳转</router-link>

//点击事件中
  this.$router.push({
    path: "/user", //要填写完整的路径
    query: {
        id: 123 //id的值
      }
  });

点击后路由效果为：

http://localhost:8080/#/user?id=123

页面中获取参数

this.$route.query.id

跳转时候的值

router.beforeEach((to, from, next) => {
    console.log(to.fullPath)    //  '/user?id=123'
    console.log(to.path)        //  '/user'
})