美文网首页
Vue学习之——vue-router2.0 组件之间传参及获取动

Vue学习之——vue-router2.0 组件之间传参及获取动

作者: Lusia_ | 来源:发表于2017-02-20 12:28 被阅读346次

一、路由的跳转

router-link 标签方式

 <router-link :to="{path:‘details‘,query: {id:el.tog_line_id}}">

注:router-link默认是一个a标签的形式,如需显示不同的样子,可以在router-link标签中写入不同标签元素。

router.push js控制

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

全局的路由(即Vue.use(VueRouter))

this.$router.push({ path: 'register', query: { plan: 'private' }})
例如路由跳转  this.$router.push( '/page' );

二、参数的获取

在组件中获取的方法为:
var id = this.$route.query.id;

相关文章

  • Vue学习之——vue-router2.0 组件之间传参及获取动

    一、路由的跳转 router-link 标签方式 注:router-link默认是一个a标签的形式,如需显示不...

  • vue组件之间通信

    vue父组件给子组件传参使用props子组件给父组件传参使用时间派发$dispatch兄弟组件之间传递参数使用vuex

  • SSM单体架构项目 (下)

    Vue 组件 组件导入 组件传参 props 组件传参,父组件向子组件传参 分页 引入分页组件

  • Vue组件通信

    Vue 组件之间的通信,通常我们遇到的都是父子组件之间的通信 一、父子组件传参 子组件定义 Props 属性; 父...

  • Vuex 模块化实现待办事项的状态管理

    前言 在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间...

  • vue2.0父子组件以及非父子组件通信传参详解

    写在前面 之前每次写项目的时候老是忘记vue的组件之间的传参,很不方便,每次都是现查,趁着这次折腾非父子组件的传参...

  • Vue兄弟组件通信(VueX)

    在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间通讯就...

  • 面试题.sync修饰符

    vue规则:组件不能修改props拿外部数据this.$emit可以触发事件,并传参$event可以获取$emit...

  • 理解.sync 的用法

    Vue 中规定: 组件不能修改 props 外部数据 $emit可以触发发事件,并传参 $event可以获取$em...

  • vue组件传参问题

    在vue项目中会经常遇到组件传参问题,今天就来了解一下父子组件和兄弟组件传参 父组件传值给子组件 *父组件通过 ...

网友评论

      本文标题:Vue学习之——vue-router2.0 组件之间传参及获取动

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