美文网首页Vue
vue-router谜之路由传参跳转

vue-router谜之路由传参跳转

作者: Lia代码猪崽 | 来源:发表于2017-12-08 16:00 被阅读34次

看着官方的文档里:

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数,下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

就想着能不能结合这两个用路径跳转然后带参数:

<router-link :to="{ name: '/shiftingPage', params: { taskId: '10086' }}">User</router-link>

在/shiftingPage里,获取:

// 获取上一个页面传来的路由
const taskId = this.$route.params.taskId;  // undefined

可以在页面console.log(this.$route),会发现params:{} 空对象
所以实践证明是不可以的,如果要传参数的话,还是老老实实用命名路由吧~

ps: 单纯的想跳转的话,特别适合写在方法里:

// 是router不是route
this.$router.push({path:'/shiftingPage'});

相关文章

  • 简单遍历vue2.0文档(五)

    11. vue-router 11.1 引用 11.2 配置路由文件 11.3 路由的跳转 11.4 路由的传参 ...

  • Next.js 跳转传参并接收接参

    介绍路由传参,接参使用方法 传参 + 跳转页面接收参数 动态路由传参 + 跳转页面接收参数创建动态路由在pag...

  • vue-router谜之路由传参跳转

    看着官方的文档里: 就想着能不能结合这两个用路径跳转然后带参数: 在/shiftingPage里,获取: 可以在页...

  • Vue实战第二天

    路由组件传参 动态路由传参 静态路由传参 函数传参htm5 history 模式 设置通用路由,找不到页面跳转自定...

  • 路由的传参

    路由的传参 下载:npm install vue-router路由的传参:1.查询字符串:/user/regist...

  • 路由的传参 axios

    1,路由的传参:案例: 2,axios下载:npm install vue-router路由的传参:1.查询字符串...

  • vue-router

    路由安装 路由配置 路由跳转 路由传参-param使用params传参只能使用name进行引入http://loc...

  • vue 路由的传参 vue中的ajax (axios)

    1.路由的传参 下载:npm install vue-router路由的传参:1.查询字符串:/user/regi...

  • vue中组件3种编程式路由跳转传参

    路由传参 1、路由配置传参(刷新页面不会丢失参数,url会携带参数) A组件跳转B组件传参A组件 路由配置 B组件...

  • 八、Flutter路由

    目录一、基本路由二、基本路由传参三、命名路由四、命名路由传参五、替换路由六、返回到根路由 一、基本路由 跳转到De...

网友评论

    本文标题:vue-router谜之路由传参跳转

    本文链接:https://www.haomeiwen.com/subject/vtweixtx.html