vue 路由跳转,传参

Posted songxuan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 路由跳转,传参相关的知识,希望对你有一定的参考价值。

一.直接跳转
//js
1.this.$router.push(‘/ad_new‘)

//html 2.
<router-link to="/ad_check">   <div class="top-menu-name">审核</div>  </router-link>

二.跳转传参

query传参,参数会显示在url后面?id=this.$router.push({
        path: ‘/member‘,
        query: {
           id: id
        }
    })
路由配置
{
    path: ‘/member‘,
    name: ‘member‘,
    component: member
}
接收参数
this.$route.query.id
push 直接传参

this.$router.push({
         this.$router.push(‘/member/‘+id);
 })

路由配置
{
     path: ‘/member/:id‘,
     name: ‘member‘,
     component: member
 }

接收参数
this.$route.params.id
路由 name 

this.$router.push({
         name: ‘member‘,
         params: {
            id: id
          }
 })

路由配置
{
     path: ‘/member‘,
     name: ‘member‘,
     component: member
 }

接收参数
this.$route.params.id

 




以上是关于vue 路由跳转,传参的主要内容,如果未能解决你的问题,请参考以下文章

Angular2 路由跳转与传参

Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参

vue路由传参并跳转页面

路由的query传参

vue 路由跳转,传参

Vue 路由引入和传参