使用 Vue Router，您可以使用它的 router.push() 函数以编程方式在站点上的路由之间导航。您可以使用字符串路径或包含路径或路径名称的对象调用 push()。

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 id="rendered-content">
      <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
},

注：本文属于原创文章，版权属于「前端达人」公众号及 qianduandaren.com 所有，未经授权，谢绝一切形式的转载