vue-router传递参数

位置:首页>文章>详情   分类: 教程分享 > Vue.js教程   阅读(742)   2024-03-16 09:29:54

       

一、vue-router路由跳转分为两大类

  1. 编程式的跳转:router.push
  2. 声明式的跳转:<router-link>

二、编程式的跳转分为三种

1、this.$router.push("detail"):detail为要跳转的路由地址,该方式简单但无法传递参数。

2、this.$router.push({name:"detail",params:{personId:33}}):detail为要跳转的路由地址,params为传递的参数,目标页面可以使用this.$route.params.personId来获取传递的参数,该方式有一个缺点就是在目标页面刷新时传递过来的参数会丢失。

3、this.$router.push({path:"/detail",query:{personId:33}}):detail为要跳转的路由地址,query为传递的参数,目标页面使用this.$route.query.personId来获取传递的参数,该方式会把传递的参数放在url上,如:localhost:8080/#/detail/?personId=33。(该方式也称为地址栏传参)

注意!!!
获取参数是 this.$route.query.** 或者this.$route.params.****
使用this.$router.query.**/params.***是无法获取到参数的

三、声明式的跳转分为三种(优缺点与编程式相同)

  1. <router-link to="detail">跳转到详情页</router-link>
  2. <router-link :to="{name:'detail',params:{personId:33}}">跳转到详情页</router-link>
  3. <router-link :to="{path:'/detail',query:{personId:33}}">跳转到详情页</router-link>
标签: vue router
地址:https://www.leftso.com/article/814.html

相关阅读

vue-router 中 routers 定义写法,讨论 require 的使用与否​首先上 routerindex.jsimport Vue from 'vue'import Router f...
一、vue-router路由跳转分为两大类编程式的跳转:router.push声明式的跳转:&lt;router-link&gtl;二、编程式的跳转分为三种1、this.$router.push...
Vue 如何返回上一页(上一个锚点)//...省略 methods:{ goback:function(){ this.$router.go(-1);//...
vue
在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,从下面创建的一个空白项目中可以看到:​关于三个文件的说明如下:index.html---主页
vue
一、如何在vue中使用route跳转页面并传递参数this.$router.push({ path: '/path/to/your',query:{param1:value1,param2:va...
vue打包会把vue相关的组件打包到一个文件vendor.*.js(*是个随机数)步骤一 资源引入vue最外层index.html文件引入资源文&lt;body&gtl;     &lt;di...
meta字段(元数据)直接在路由配置的时候,给每个路由添加一个自定义的meta对象,在meta对象中可以设置一些状态,来进行一些操作
普通写法​vantUI 使用字体图标和文字&lt;template&gtl; &lt;van-tabbar v-model="active" active-color="#07c160"&gtl...
Vue v-if判断数组长度 searchResultDataList为vue定义的data里面的变量&lt;li  v-if="Object.keys(searchResultDataLis...
在初始化完一个vue项目(基于vue-cli 和webpack)之后,我们可以通过 npm run dev来让这个项目跑起来