在vue中怎么动态变换router-link中to的值

Question

如题所述

Answer 1

比如有这么个router需要跳转
const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

你的router-link可以这么写

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

还可以用编程在代码里写，效果也一样：

router.push({ name: 'user', params: { userId: 123 }})

具体的推荐你看下vue router的官网，里面有详细的说明和例子

Answer 2

在用vue-cli脚手架生成项目之后，在app.vue和main.js里面简单修改一下。

比如有这么个router需要跳转：

1、const router = new VueRouter

routes:：path: '/user/:userId'，

name: 'user',

component: User;

2、你的router-link可以这么写：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>;

3、还可以用编程在代码里写，效果也一样： 

router.push：name: 'user', params: { userId: 123 }；

本回答被网友采纳