前端 - vue2项目，两个按钮路由跳转是同一个组件，应该怎么做？

Question

比如一个叫新建，一个叫直接登记，都是跳转同一个组件，那么是应该做2个路由，还是一个路由传两个参数去做判断比较好？

Answer 1

主要是看你的页面是否有很大差别，如果差别不大可以用复用同一个页面，只不过路由需要建立两个，或者通过动态路由来实现。

比如说:

const router = new VueRouter({
  routes: [
    { path: '/member/:type', component: OrderEditPage }
  ]
})

跳转的时候使用 this.$router.push('/member/add') 和 this.$router.push('/member/order') 来区分。页面中可以使用 this.$route.params 来获取 type 类型，来实现一些个性化的展示，比如说页面标题。

Answer 2

直接写个方法传参调用不香吗

export function toUser(id?: string) {
    router.push({ path: '/user', query: { id: id } });
}

Answer 3

不必要搞两个路由，两个路由对应两个页面，稍微麻烦点
一个路由简单些，通过url传参数判断逻辑，不同按钮传不同类型，比如：‘/a/b?type=add’

Answer 4

页面一样但是场景语义不一样最好是定义成两个路由，你可以设置一个别名alias
https://v3.router.vuejs.org/zh/guide/essentials/redirect-and-...别名