使用vue-router 来实现webapp的页面跳转，有时候需要传递参数，做法如下：参考文献：&主要有以下几个步骤：（1） 设置好路由配置router.map({
'/history/:deviceId/:dataId': {
name: 'history',
component: { ... }
})这里有2个关键点：& & a）给该路由命名，也就是上文中的 name: 'history',& & b）在路径中要使用在路径中使用冒号开头的数字来接受参数，也就是上文中的 :deviceId, :dataId；&（2）在v-link中传递参数；&a v-link="{ name: 'history&history&这里的123，456都可以改用变量。比如该template所对应的组件有2个变量定义如下：data: function() {& & return {& & & deviceId:123,& &&& dataId:456& &&& &&}} & &此时上面那个v-link可以改写为：&a v-link="{ name: 'history&history&（3）在router的目标组件上获取入参& & 比如在router目标组件的ready函数中可以这么使用。& & ready: function(){& &&& & console.log('deviceid: ' + this.$route.params.deviceId);& &&& &&console.log('dataId: ' + this.$route.params.dataId);& & }————完————
阅读(...) 评论()您还可以使用以下方式登录
当前位置：&>&&>&&>& > Vue系列：通过vue-router如何传递参数示例
Vue系列：通过vue-router如何传递参数示例
使用vue-router 来实现webapp的页面跳转，有时候需要传递参数，做法如下：
参考文献：
主要有以下几个步骤：
（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() {
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);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持就爱阅读。
欢迎转载：
推荐： 　　　vue 组件之间传值
vue组件间传值分为父组件给子组件传值和子组件给父组件传值一、父组件给子组件传值父组件中引入子组件，父组件的js里定义要传递的属性值，下面的写法是动态的传递，name可以通过定义方法，在方法里动态修改，如不需要动态的传递，则直接使用属性定义值parent.vue&template&
&child v-bind:name="name"&&/child&
&/template&
import child from "./child.vue"
export default {
components: {child},
return {name:"张三"}
&/script&子组件定义props接收父组件传递的值，如下：child.vue&template&
&div&{{name}}&/div&
&/template&
export default {
props:["name"]
&/script&二、子组件给父组件传值首先在父组件中引入子组件，定义一个方法接收子组件传递的值，如果只需要知道子组件完成某项操作，可以不传值，只定义方法，如下（子组件给父组件传值）：parent.vue&template&
&child @childToParent="child"&&/child&
&/template&
import child from "./child.vue"
export default {
components: {child},
child(data){
console.log(data);
&/script&在子组件中定义一个方法，传值给父组件，如下：child.vue&template&
&button @click="childClick"&点击&/button&
&/template&
export default {
childClick(){
this.$emit("childToParent","I am child.");
&/script&三、父组件调用子组件方法先在子组件里定义好方法，在父组件里引入子组件后，在使用子组件时，绑定一个ref，这样就可以实现父组件调用子组件的方法parent.vue&template&
&child ref="child"&&/child&
&button @click="click"&click&/button&
&/template&
import child from "./child.vue"
export default {
components: {child},
this.$refs.child.init();
&/script&child.vue&template&
&p&{{name}}&/p&
&/template&
export default {
this.name="jack";
没有更多推荐了，用vue封装插件并发布到npm
一、基于vue的国家区号列表
vue-flag-list包含了大部分国家的区号，点击右边的三角形展开列表可以选择国家区号，若列表中没有区号，也可以自己输入区号。
全球区号列表
1.1 初始化组件
用的是vue-cli来初始化组件，虽然有很多东西不需要，因为对这个比较熟悉，所以还是按照这个步骤来。
vue init webpack vue-flag-list
cd vue-flag-list
cnpm install
npm run dev
1.2 根据自己的需求，实现具体功能，我的主要功能写在vue-flag-list.vue组件中。
export default {
name: 'vue-flag-list',
功能写好后，修改package.json等配置文件，为打包发布做准备
1.3 添加index.js
import flagComponent from ‘./Vue-Flag-List.vue’
const VueFlagList = {
install: function (Vue) {
if (typeof window !== ‘undefined’ && window.Vue) {
Vue = window.Vue
Vue.component(‘VueFlagList’, flagComponent)
export default VueFlagList
1.4 修改配置文件
1.4.1 package.json
“name”: “vue-flag-list”,
“version”: “1.0.0”,
“description”: “A vue plugin for entering and selecting area code”,
“author”: “guimin”,
// 因为组件包是公用的，所以private为false
“private”: false,
// 配置main结点，如果不配置，我们在其他项目中就不用import XX from ‘包名’来引用了，只能以包名作为起点来指定相对的路径
“main”: “dist/vue-flag-list.min.js”,
“scripts”: {
“dev”: “node build/dev-server.js”,
“start”: “node build/dev-server.js”,
“build”: “node build/build.js”
// 指定代码所在的仓库地址
“repository”: {
“type”: “git”,
“url”: “git+”
// 指定打包之后，包中存在的文件夹
“files”: [
// 指定关键字
“keywords”: [
“flag code”
“license”: “MIT”, //开源协议
// 项目官网的url
“homepage”: ““,
“dependencies”: {
“vue”: “^2.3.3”
“devDependencies”: {
“engines”: {…},
“browserslist”: […]
1.4.2 .gitignore 文件
因为要用dist文件夹，所以在.gitignore文件中把dist/去掉。
1.4.3 webpack.prod.conf.js 文件
为了支持多种使用场景，我们需要选择合适的打包格式。常见的打包格式有 CMD、AMD、UMD，CMD只能在 Node 环境执行，AMD 只能在浏览器端执行，UMD 同时支持两种执行环境。显而易见，我们应该选择 UMD 格式。Webpack 中指定输出格式的设置项为 output.libraryTarget，其支持的格式有：
“var” - 以一个变量形式输出： var Library = xxx (default)；
“this” - 以 this 的一个属性输出： this[“Library”] = xxx；
“commonjs” - 以 exports 的一个属性输出：exports[“Library”] = xxx；
“commonjs2” - 以 module.exports 形式输出：module.exports = xxx；
“amd” - 以 AMD 格式输出；
“umd” - 同时以 AMD、CommonJS2 和全局属性形式输出。
以下是 webpack.prod.conf.js 中 output 设置的示例：
path: path.resolve(__dirname, ‘../dist’),
publicPath: ”,
filename: ‘vue-flag-list.min.js’,
library: ‘VueFlagList’,
libraryTarget: ‘umd’,
umdNamedDefine: true
Vue 是组件库的外部依赖。组件库的使用者会自行导入 Vue，打包的时候，不应该将 Vue 打包进组件库。但是，如果你将打包后的组件库以
lin@lin-Pro in ~/www/vue-flag-list on git:master $ npm publish
lin@lin-Pro in ~/www/vue-flag-list on git:master $ + vue-flag-list@1.0.0
折腾了很久，终于把vue-flag-list插件的雏形发布出去了，这是一个很简单的插件，以后会继续维护它，添加更多的实用功能。
npm unpublish –force：移除一个发布包（也可以移除指定版本的包）
npm logout：登出用户
作者：rithe
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
没有更多推荐了，如何让vue中变量作为一个参数传递_百度知道
如何让vue中变量作为一个参数传递
我有更好的答案
使用vue.js与台实现数据交互利用vue-resource组件提供系列api：get(url, [data], [success], [options])post(url, [data], [success], [options])put(url, [data], [success], [options])patch(url, [data], [success], [options])delete(url, [data], [success], [options])jsonp(url, [data], [success], [options])具体举例：1、导入vue-resource2、基于全局Vue象使用http// 通someUrl获取台数据功执行then代码Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);3、Vue实例内使用$http// $httpvue局部范围内实例this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);说明：发送请求使用then处理响应结then两参数第参数响应功调函数第二参数响应失败调函数
采纳率：70%
来自团队：
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。