本文目录
- vue this.router 怎么传递参数
- 关于vue-router接收参数
- vue-router 20 next 函数怎么携带参数
- vue路由怎么传参router-link传参
- vue-router 中怎么把父路由的参数传递到子路由上
- vue-router怎么给子路由传参
- vue 怎么拿到router.push传递的数据
- Vue 路由传值的几种方法
vue this.router 怎么传递参数
主要有以下几个步骤：（1） 设置好路由配置router.map({’/history/:deviceId/:dataId’: {name: ’history’, // give the route a namecomponent: { ... }}})这里有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);}
关于vue-router接收参数
Vue Router params 参数接收为空-简书path 和 params 传参,B.vue 中 this.$route.params 接收为空 A.vue let ...this.$route.params 正常接受参数 ...简书2018-12-18。第一种：get方法接收值this.$route.query.name，第二种：post方法this.$route.params.name （在页面刷新的时候就会消失）第三种：路由方法props:{name:{required:false,default:’’}} （页面刷新不消失，可以在路由配置中设置参数）。另外： 如果在链接上设置 replace 属性，当点击时，会调用 router.replace() 而不是 router.push()，于是浏览器不会留下 history 记录。
vue-router 20 next 函数怎么携带参数
{{eltourism_name}} {{eltog_line_id}} {{eladdress}} 在组件中，需要传动态参数时，可以如上例子 query中的参数id就是要传的参数，在组件中获取的方法为： created: function() { var id = this$routequeryid; thisgetData(id);vue-router 20 next 函数怎么携带参数
vue路由怎么传参router-link传参
一个简单的小例子
《!DOCTYPE html》
《html lang=“en“》
《head》
《meta charset=“UTF-8“》
《meta name=“viewport“ content=“width=device-width, initial-scale=1.0“》
《meta http-equiv=“X-UA-Compatible“ content=“ie=edge“》
《title》Document《/title》
《script src=“./vue.min.js“》《/script》
《script src=“./vue-router.min.js“》《/script》
《/head》
《body》
《div id=“app“》
《!--to 表示要跳到哪个url里面--》
《router-link to=“/cici“》Cici《/router-link》
《router-link to=“/0725“》0725《/router-link》
《!-- 这里不需要写--》
《router-view》《/router-view》
《/div》
《/body》
《/html》
《script》
//路由的作用就是切换页面的跳转
//这里是没有s的
// var cici = Vue.extend({
// template: ’《div》CICI板块《/div》’
// })
// var C0725 = Vue.extend({
// template: ’《div》0725板块《/div》’
// })
// 可以简写成这个样
var cici = {
template: ’《div》CICI板块《/div》’
}
var C0725 = {
template: ’《div》0725板块《/div》’
}
//创建路由,注册好配置,和跳转
var router = new VueRouter({
routes: [{
path: ’/cici’,
component: cici //传入的是一个对象
},
{
path: ’/0725’,
component: C0725 //传入的是一个对象
}
]
})
var vm = new Vue({
el: “#app“,
router: router
})
《/script》
vue-router 中怎么把父路由的参数传递到子路由上
比如说书籍详情页面携带参数`bookId```````在书籍详情的组件里面提取bookId```exportdefault(){data(){},ready(){console.log(this.$route.params.bookId)//123}}````同时在路由那里这样配置：```“/book/:bookId“:{name:“book“,component:““}````还有，，，这种问题应该去segmentfault或者stackoverflow
vue-router怎么给子路由传参
路由传参数。在很多时候我们需要路由上面传递参数，比如新闻列表页，我们需要传递新闻ID，给新闻详细页。 1.新闻列表页模板《template id=“news“》《div》《h2》新闻列表《/h2》《ul》《li》《router-link to=“/news/001“》新闻001《/router-link》《/li》《li》《router-link to=“/news/002“》新闻002《/router-link》《/li》《/ul》《/div》《/template》1234567891011121312345678910111213我们访问/news/001，跳转到新闻详细页，展示001的这条新闻。2.新闻详细页组件准备《template id=“NewsDetail“》《div》新闻详细页面《span》{{$route.params.id}}《/span》《/div》《/template》123456123456$route.params.id获取路由上的参数 在js里定义路由组件：//新闻详细页组件const NewsDetail = { template: ’#NewsDetail’ };12123.定义路由，增加一个路由{ path: ’/news/:id’, component: NewsDetail },11访问/news/001或者/news/002就展示新闻详细页 4.全部代码如下：《!DOCTYPE html》《html》《head》《title》《/title》《meta charset=“utf-8“》《script src=“// 记得要通过 router 配置参数注入路由，// 从而让整个应用都有路由功能const app = new Vue({router}).$mount(’#box’)// 现在，应用已经启动了！《/script》《/body》《/html》
vue 怎么拿到router.push传递的数据
使用vue-router 来实现webapp的页面跳转，有时候需要传递参数，做法如下：主要有以下几个步骤：（1） 设置好路由配置router.map({’/history/:deviceId/:dataId’: {name: ’history’, // give the route a namecomponent: { ... }}})这里有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: ’ + thiswww.huashijixun.com?route.params.deviceId);console.log(’dataId: ’ + this.$route.params.dataId);}
Vue 路由传值的几种方法
方案一：
getDescribe(id) {// 直接调用$router.push 实现携带参数的跳转this.$router.push({path: `/describe/${id}`,})
方案一，需要对应路由配置如下：
{ path: ’/describe/:id’,name: ’Describe’,component: Describe}
很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。
this.$route.params.id
方案二：
父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。
this.$router.push({ name: ’Describe’, params: { id: id}})
对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。
{ path: ’/describe’,name: ’Describe’,component: Describe}
子组件中: 这样来获取参数
this.$route.params.id
方案三：
父组件：使用path来匹配路由，然后通过query来传递参数这种情况下 query传递的参数会显示在url后面?id=？
this.$router.push({ path: ’/describe’, query: { id: id}})
对应路由配置：
{ path: ’/describe’,name: ’Describe’,component: Describe}
对应子组件: 这样来获取参数
this.$route.query.id这里要特别注意 在子组件中 获取参数的时候是$route.params 而不是$router 这很重要~~~
