Vue中router两种传参方式
1.Vue中router使用query传参
相关Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue-2.4.0.js"></script>
<script src="../js/vue-resource-1.3.4.js"></script>
<!--1.引入vue-router-->
<script src="../lib/vue-router-3.0.1.js"></script>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
<style>
.myactive {
color: red;
font-size: 20px;
}
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(140px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.5s ease;
}
</style>
</head>
<body>
<div id="app">
<router-link to="/login?id=10&name='zhangsan'">登录</router-link>
<router-link to="/register">注册</router-link>
<!--router-view,提供的用来当做占位符的 router中的规则会展现到这个里面去-->
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
<script>
var login = {
template: '<h1>这个是登录组件--- {{$route.query.id}}----{{$route.query.name}} </h1>',
data:function () {
return {
msg:'123'
}
},
created:function () {
console.log(this.$route);
}
}
var register = {
template: '<h1>注册组件</h1>'
}
//在new
var routerObj = new VueRouter({
//这个配置对象中的route表示路由匹配规则的意思
//1.path,表示监听,路由的连接地址
//2.component 表示路由匹配到的path
routes: [
//注意:component属性值,必须是一个组件模板对象,不能是引用名称
{path: '/', redirect: '/login'},
{path: '/login', component: login},
{path: '/register', component: register}
],
linkActiveClass: 'myactive'
})
var vm = new Vue({
el: "#app",
data: {},
methods: {},
router: routerObj //将路由规则对象,注册到vm实例上,用来监听地址对象
})
</script>
</body>
</html>
2Vue中router使用params传参
相关Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue-2.4.0.js"></script>
<script src="../js/vue-resource-1.3.4.js"></script>
<!--1.引入vue-router-->
<script src="../lib/vue-router-3.0.1.js"></script>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
<style>
.myactive {
color: red;
font-size: 20px;
}
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(140px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.5s ease;
}
</style>
</head>
<body>
<div id="app">
<router-link to="/login/10">登录</router-link>
<router-link to="/register">注册</router-link>
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
<script>
var login = {
template: '<h1>这个是登录组件--- {{$route.params.id}} </h1>',
data:function () {
return {
msg:'123'
}
},
created:function () {
console.log(this.$route.params);
}
}
var register = {
template: '<h1>注册组件</h1>'
}
var routerObj = new VueRouter({
routes: [
{path: '/login/:id', component: login},
{path: '/register', component: register}
],
linkActiveClass: 'myactive'
})
var vm = new Vue({
el: "#app",
data: {},
methods: {},
router: routerObj //将路由规则对象,注册到vm实例上,用来监听地址对象
})
</script>
</body>
</html>
Vue中router两种传参方式的更多相关文章
-
vue param和query两种传参方式
1.传参方式 query传参方式 this.$router.push({ path: "/home", query: {code:"123"} }) param ...
-
vue的param和query两种传参方式及URL的显示
路由配置: // 首页 { path: '/home', name:'home', component:Home }, // 行情 { path: '/markets', name:'market', ...
-
四：flask-URL两种传参方式（路径传参和get传参）
新建一个视图 第一种:路径传参:url/参数:<参数名>,然后再视图函数中接收参数 也可以指定数据类型 string:默认使用此数据类型,接收没有任何斜杠"\/"的文本 ...
-
SpringMVC Ajax两种传参方式
1.采用@RequestParam或Request对象获取参数的方法 注:contentType必须指定为:application/x-www-form-urlencoded @ResponseBod ...
-
MyBatis两种传参方式的区别
$与#的区别 select * from T_PRINT_LAYOUT where D_RECID = ${recId} 最后生成的SQL为: select * from T_PRINT_LAYOUT ...
-
python 计算机发展史,线程Process使用 for循环创建 2种传参方式 jion方法 __main__的解释
########################总结################## #一 操作系统的作用: 1:隐藏丑陋复杂的硬件接口,提供良好的抽象接口 2:管理.调度进程,并且将多个进程对硬 ...
-
Mybatis的几种传参方式，你了解吗？
持续原创输出,点击上方蓝字关注我 目录 前言 单个参数 多个参数 使用索引[不推荐] 使用@Param 使用Map POJO[推荐] List传参 数组传参 总结 前言 前几天恰好面试一个应届生,问了 ...
-
浅谈C++三种传参方式
浅谈C++三种传参方式 C++给函数传参中,主要有三种方式:分别是值传递.指针传递和引用传递. 下面通过讲解和实例来说明三种方式的区别. 值传递 我们都知道,在函数定义括号中的参数是形参,是给函数内专 ...
-
Vue中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...
随机推荐
-
AngularJs之$scope对象（作用域）
一.作用域 AngularJs中的$scope对象是模板的域模型,也称为作用域实例.通过为其属性赋值,可以传递数据给模板渲染. 每个$scope都是Scope类的实例,Scope类有很多方法,用于 ...
-
网页设计中常用的19个Web安全字体
来自http://www.jb51.net 在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体.但多数情况 ...
-
OO的ALV隐藏工具栏的form
OO的ALV隐藏工具栏: ***展示数据 CALL METHOD gr_alvgrid->set_table_for_first_display EXPORTING is_variant = g ...
-
Cytoscape画图初探
Cytoscape是一个做网络图的js插件.用起来非常方便,并且非常强大.这是它的站点:点击打开链接 使用它须要导入两个文件,一个是js文件,一个是css文件.官网上下载. 这里实现了一个功能.即从后 ...
-
Ubuntu 16.04上Docker使用手记
一.Docker Hub的使用Docker Hub是Docker官方维护的仓库,里面已经包含了很多的镜像,一般我们的需求直接在官方仓库搜索就可以得到解决.在官方的公共仓库中我们无需登录就可以进行镜像的 ...
-
HttpHelps类
/// <summary> /// 类说明:HttpHelps类,用来实现Http访问,Post或者Get方式的,直接访问,带Cookie的,带证书的等方式,可以设置代理 /// 重要提示 ...
-
2781: [JSOI2007]文本生成器
2781: [JSOI2007]文本生成器 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 8 Solved: 4[Submit][Status][We ...
-
softmax函数
该函数作用于输出层之上,用于改善输出层神经元饱和时与该神经元直接相关的w和bias学习率下降的问题. 定义: 这表明,在用柔性最大值函数定义输出神经元的输出时,神经元的输出是一种概率分布,所有输出层神 ...
-
ML.NET 示例：多类分类之鸢尾花分类
写在前面 准备近期将微软的machinelearning-samples翻译成中文,水平有限,如有错漏,请大家多多指正. 如果有朋友对此感兴趣,可以加入我:https://github.com/fei ...
-
[转]VS2013+简单稀疏光束调整库SSBA配置（64位编译）
有关SSBA库的资源比较少,我是在Github上搜索下载的,具体的GitHub官方下载地址为:SSBA 下载后在SSBA解压文件夹下新建文件夹build. 打开cmake gui,在source co ...