vue 页面跳转传参

2019-02-27 本文已影响0人 _sands

页面之间的跳转传参，正常前端js里写 window.location.href="xxxxx?id=1" 就可以了；
但是vue不一样需要操作的是路由history，需要用到 VueRouter,

常用的场景是：列表页点击“查看”按钮，跳转到详情页。
在列表页（list.vue）按钮点击事件里写上

detail(row) {
      this.$router.push({ path: "detail", query: { id: row.id } });
},

在详情页(detail.vue)里写上

 let id = Number(this.$route.query.id);

即可获取到参数id了。

先看看 $router 和$ route是什么,在vscode f12后
看到

declare module "vue/types/vue" {
  interface Vue {
    $router: VueRouter;
    $route: Route;
  }
}

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
VueRouter官网传送门

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

image

其中