首页与我联系

「短文」如何使用 Vue Router 的 Push 函数

By 前端达人
Published in 3-Vue
September 16, 2022
1 min read
「短文」如何使用 Vue Router 的 Push 函数

使用 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
},

前端达人公众号.jpg

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


Tags

vuebasic
Previous Article
「短文」如何在 Vue 中使用本地作用域(Locally Scope CSS)样式
前端达人

前端达人

专注前端知识分享

相关文章

「短文」如何在 Vue 中复制文本到剪贴板
November 04, 2022
1 min

前端站点

VUE官网React官网TypeScript官网

公众号:前端达人

前端达人公众号