vue路由传参的方式
『壹』 vue路由中怎么传入数据
。。。。
『贰』 vue router 传递参数 少一个参数怎么就不显示了
首先在app.vue里面有这么来一段自然后你所点击的按钮其实是这个东西，这个其实就是个封装完的a标签你在router里面配置完了相关路由之后就能在点击这个按钮的时候将router-view标签里面的组件替换掉了
『叁』 vue.js路由的参数怎么传递
带上params或者query
用route.params 或者route.query接收
可以带对象类型的 params 没有成功试过。。。。。
『肆』 关于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-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 this.router 怎么传递参数
主要有以下几个步骤：
（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);
}
『柒』 vue路由传参刷新无数据怎么处理
可以使用keep-alive缓存页面：具体做法是：可在App.vue中
<keep-alive :include="includePages">
<router-view id="app"></router-view>
</keep-alive>
includePages：对应一个数组，里面是要缓存的页面的name，即是.VUE文件中：
export default {
name: 'xxx',
这里的XXX
『捌』 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>
我们访问/news/001，跳转到新闻详细页，展示001的这条新闻。
2.新闻详细页组件准备
<template id="NewsDetail">
<div>
新闻详细页面
<span>{{$route.params.id}}</span>
</div>
</template>123456123456
$route.params.id获取路由上的参数
在js里定义路由组件：
//新闻详细页组件
const NewsDetail = { template: '#NewsDetail' };1212
3.定义路由，增加一个路由
{ path: '/news/:id', component: NewsDetail },11
访问/news/001或者/news/002就展示新闻详细页
4.全部代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="box">
<p>
<router-link to="/home">home</router-link>
<router-link to="/news">news</router-link>
</p>
<router-view></router-view>
</div>
<!-- 模板抽离出来 -->
<template id="home">
<!-- 注意：组件只能有一个根元素，所以我们包装到这个div中 -->
<div>
<h2>首页</h2>
<router-link to="/home/login">登录</router-link>
<router-link to="/home/reg">注册</router-link>
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</template>
<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>
<template id="login">
<div>登录界面</div>
</template>
<template id="reg">
<div>注册界面</div>
</template>
<template id="NewsDetail">
<div>
新闻详细页面
<span>{{$route.params.id}}</span>
</div>
</template>
<script type="text/javascript">
// 1. 定义（路由）组件。
const Home = { template: '#home' };
const News = { template: '#news' };
const Login = { template: '#login' };
const Reg = { template: '#reg' };
//新闻详细页组件
const NewsDetail = { template: '#NewsDetail' };
// 2. 定义路由
const routes = [
{ path: '/', redirect: '/home' },
{
path: '/home',
component: Home,
children:[
{ path: '/home/login', component: Login},
{ path: '/home/reg', component: Reg}
]
},
{ path: '/news', component: News,},
{ path: '/news/:id', component: NewsDetail },
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#box')
// 现在，应用已经启动了！
</script>
</body>
</html>
『玖』 vue2.0路由后面的参数怎么在页面中传递
可以通过vuex完成组件之间的传参，包括数组对象等，这也是作者建议的做法，构建大版型项目管理的状权态过多不可能都通过url的方式传递参数的。 用了vue-router就是单页app,页面都没刷新过，你把变量放在 window. 所有组件都能访问得到。