Vue页面跳转方式及传参总结

路由配置

//路由配置  routerindex.js页面

import Vue from 'vue'
import Router from 'vue-router'
import UserManager from '@/components/UserManager'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/userManager',
      name: 'userManager',
      component: UserManager
    }
  ]
})

1.标签跳转

<router-link to="/userManager"> <router-link/>

• 跳转时传参

//路由配置
 path: '/userManager/:id',  
 
 //跳转页面   this.id 需要传的参数
<router-link :to="'/userManager/' + this.id"> <router-link/>


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

2.事件跳转

methods: {
  goUserManager() {
    this.$router.push({ path:'/userManager'})
  }
}

• query传参

相当于get请求，页面跳转时参数会在地址栏中显示

//跳转页面 
this.$router.push({ 
    path:'/userManager',
    query: {
        id:this.id
    }
})

//接收参数
this.$route.query.id

• params传参

相当于post请求，页面跳转时参数不会在地址栏中显示

//跳转页面 
this.$router.push({ 
    path:'/userManager',
    name:'userManager', 
    //params传参 需要使用 name 否则取不到；对应路由配置的 name
    params: {
        id:this.id
    }
})

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

• 使用params传参时 刷新页面参数消失

配置路由 在path加 /:id 对应需要传的参数名

//路由配置
 path: '/userManager/:id',

注意 ：传参是 router，接收参数是 route