首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue页面跳转及传参

Vue实现页面跳转方式及传参方式

2024-03-19 10:15:46 作者：sunfan0

这篇文章主要介绍了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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。