Vue系列:通过vue-router如何传递参数

使用vue-router 来实现webapp的页面跳转,有时候需要传递参数,做法如下:

参考文献:http://router.vuejs.org/en/named.html

主要有以下几个步骤:

(1) 设置好路由配置

router.map({
  ‘/history/:deviceId/:dataId‘: {
    name: ‘history‘, // give the route a name
    component: { ... }
  }
})

这里有2个关键点:

a)给该路由命名,也就是上文中的 name: ‘history‘,

b)在路径中要使用在路径中使用冒号开头的数字来接受参数,也就是上文中的 :deviceId, :dataId;

(2)在v-link中传递参数;

    <a v-link="{ name: ‘history‘, params: { deviceId: 123, dataId:456 }}">history</a>

这里的123,456都可以改用变量。

比如该template所对应的组件有2个变量定义如下:

data: function() {

return {

deviceId:123,

dataId:456

}

}

此时上面那个v-link可以改写为:

    <a v-link="{ name: ‘history‘, params: { deviceId: deviceId, dataId: dataId }}">history</a>

(3)在router的目标组件上获取入参

比如在router目标组件的ready函数中可以这么使用。

ready: function(){

console.log(‘deviceid: ‘ + this.$route.params.deviceId);

console.log(‘dataId: ‘ + this.$route.params.dataId);

}

————完————

来自为知笔记(Wiz)

时间: 2024-11-08 15:22:59

Vue系列:通过vue-router如何传递参数的相关文章

Vue系列---理解Vue.nextTick使用及源码分析(五)

_ 阅读目录 一. 什么是Vue.nextTick()? 二. Vue.nextTick()方法的应用场景有哪些? 2.1 更改数据后,进行节点DOM操作. 2.2 在created生命周期中进行DOM操作. 三. Vue.nextTick的调用方式如下: 四:vm.$nextTick 与 setTimeout 的区别是什么? 五:理解 MutationObserver 六:nextTick源码分析 回到顶部 一. 什么是Vue.nextTick()? 官方文档解释为:在下次DOM更新循环结束之

Vue系列:Vue Router 路由梳理

Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数.查询.通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式,在 IE9 中自动降级 自定义的滚动条行为 1.动态路由 动态路由,可以将某种模式匹配到的所有路由,并全都映射到同个组件. (通俗点,比如根

Vue系列——在vue项目中使用echarts

安装echarts依赖 npm install echarts -S 创建图表 全局引入 main.js // 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts Hello.vue <div id="myChart" :style="{width: '300px', height: '300px'}"></div> export default {

vue-router传递参数的几种方式

vue-router传递参数分为两大类 编程式的导航 router.push 声明式的导航<router-link> 编程式的导航router.push 传递参数分为两种类型:字符串,对象 字符串 字符串的方式是直接将路由地址以字符串的方式来跳转,这种方式简单但不能传递参数 this.$router.push("home"); 对象 想要传递参数主要就是以对象的方式来写,分为两种方式:命名路由,查询参数 1.命名路由 命名路由的前提是在注册路由的地方给路由命名如: 命名路由

Vue - 路由传递参数

Vue 2.0  路由传递参数 Vue 路由传递参数 有两种方式: 一.用name传递参数 两步完成用name传值并显示在模板里: 在路由文件src/router/index.js里配置name属性. 1 2 3 4 5 6 7 routes: [ { path: '/', name: 'Hello', component: Hello } ] 模板里(src/App.vue)用$router.name的形势接收,比如直接在模板中显示: 1 <p>{{ $route.name}}</p&

Vue路由传递参数详细说明

前言:最近我跟同事在做一个BI系统,采用前后端分离.整个系统包括数据分析系统.运营支持.系统设置等多个子系统.数据分析系统其实就是做各种数据报表.数据统计.实时数据的系统,这里面其实整个页面就是一个模板,最上面是filter.第二级是统计图.最下面是table数据.所以在数据分析子系统中,只要配置一个路由就可以匹配所有页面,在系统中,我把这个为公用路由.至于公用路由权限如何鉴定其实很简单:获取到用户权限列表后,渲染出所有的权限菜单,但注意每次跳转时一定要进行权限校验,具体原因自行思考.说着有点跑

[vue]传递参数与重定向

传递参数与重定向 Main.vue <!--name:对应index.js中router的name, params:传参--> <router-link :to="{name: 'UserProfile', params: {id: 1}}">个人信息</router-link> index.js的router { path: '/user/Profile/:id', name: 'UserProfile', component: UserProfi

Vue 给子组件传递参数

Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div class="row"> <div class="col-sm-12"> <h3>My Components</h3> <todo-item :todos="todos01"></todo-item

Vue 路由传参-使用query方式传递参数

2018-08-15 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script> <script src="https://cdn.bootcss.com/vue-r