如何使用 Vue Router 的 Push 方法

Question

使用 Vue Router ，你可以使用它的 router.push() 以编程方式在您网站上的路线之间导航的功能，你可以调用 push() 使用字符串路径，或使用包含 path 或者 name 的路线。

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: { template: '<h1>Home</h1>' }
    },
    {
      path: '/about',
      component: { template: '<h1>About Us</h1>' }
    },
    {
      path: '/user/:id',
      name: 'user',
      component: { template: '<h1> Your id is {{$route.params.id}} </h1>' }
    }
  ]
});

const app = new Vue({
  router,
  methods: {
    changeRoute(route) {
      // `route` is either a string or object
      router.push(route);
    }
  },
    template: `
    <div>
      <div>
        <button @click="changeRoute('home')">Home</button>
        <button @click="changeRoute('about')">About Us</button>
        <button @click="changeRoute({path: '/user/123'})">Get ID</button>
      </div>
      <div>
      <router-view></router-view>
      </div>
    </div>
  `
}).$mount('#example');

传递参数

使用传递参数 router.push()，您可以执行以下操作之一：

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

// or

const id = 123;
router.push({ path: `/user/${id}` });

然后访问它，使用您在路由器中声明的任何内容作为对象属性名称。
如果路线是 /user/:id 路径将是 $route.params.id 或者你可以通过添加一个道具来访问它 props:true 路径中的对象。

{
  path: '/user/:id',
  component: { template: '<h1>Your id is {{$route.params.id}}</h1>' },
  props:true
},

这是一个 现场演示 。