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);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
在React Router v4中，如何使用传递参数？
-
vue-router v4.1.4 更新日志 官方似乎不再支持以下的写法了： 这么写会提示: Discarded invalid param(s)... 官方推荐的替代方案： 将数据放入pinia等存储中 path query HistoryState 将其作为新属性传递给to.meta 导航守卫 方案1感觉让代码变得过于复杂了。 方案2对于需要传递复杂的对象。而不是简单的字符串或数字的话似乎无法
-
问题内容： 到目前为止，我对如何通过参数将属性从一个组件传递到另一组件的了解程度如下 //开始：我的知识范围 假设存在一些在A.jsx中调用的状态变量。我想将此传递给B.jsx，所以我执行以下操作 然后在B.jsx中，我可以做类似 当被调用时将呈现“今天的主题是天气！” //结束：我的知识范围 现在，我正在阅读带有以下代码片段的react-router教程 topic.jsx： route.jsx
-
问题内容： 我正在使用PhantomJS page.evaluate（）进行抓取。我的问题是我传递到Webkit页面的代码是沙盒化的，因此无法访问我的主要幻象脚本的变量。这使得很难使抓取代码通用。 如何将参数推入页面？ 问题答案： 我遇到了确切的问题。可以使用一些技巧，因为它也可以接受字符串。 有几种方法可以执行此操作，但是我使用了一个称为的包装器，该包装器接受其他参数以传递给必须在Webkit端
-
本文向大家介绍vue系列之requireJs中引入vue-router的方法，包括了vue系列之requireJs中引入vue-router的方法的使用技巧和注意事项，需要的朋友参考一下 requireJs简介 参数配置 requireJS 常用的方法与命令也就两个，因此requireJS使用起来非常简单。 require define 其中define是用于定义模块，而require是用于载入模
-
本文向大家介绍使用vue-router在Vue页面之间传递数据的方法，包括了使用vue-router在Vue页面之间传递数据的方法的使用技巧和注意事项，需要的朋友参考一下 前言 几周前，我写了关于 Vue 路由的使用和在 Vue 页面导航的文章。这是在应用程序中探索的一个基本例子。 通常，在将导航构建到应用程序中时，您会发现需要将数据从一个页面传递到另一个页面。（不通顺）例如，您遵循 master