Vue 路由传递参数实例讲解
时间:2018-11-21
本文章向大家介绍Vue 路由传递参数的2中方法(方式1:路由路径携带参数(param/query)、属性携带数据 ,这个是app.vue),需要的朋友可以参考一下
方式1:路由路径携带参数(param/query)
1) 配置路由
children:[ { path:'/home/message/detail/:id', component:MessageDetail } ]
2) 路由路径
<router-link :to="'/home/message/detail/'+message.id">{{message.title}}</router-link>
3) 路由组件中读取请求参数
this.$route.params.id
方式2:<router-view>属性携带数据 ,这个是app.vue
<template> <div> <div class="row"> <h2>router-aa</h2> </div> <div class="row"> <div class="col-md-2 col-md-offset-9"> <div class="list-group"> <router-link to="/about" class="list-group-list">About</router-link> <router-link to="/home" class="list-group-list">Home</router-link> </div> </div> </div> <div class="row"> <div class="col-md-6 md-offset-6"> <div class="panel"> <div class="panel-body"> <keep-alive> <router-view msg="abc"></router-view> </keep-alive> </div> </div> </div> </div> </div> </template> <script> </script> <style> h2{ width: 100%; text-align: center; margin-top: 20px; } .list-group-list{ border:1px solid #ddd; color: #000; padding: 10px; margin-left: 30px; } .list-group-list:link{ text-decoration: none; } .list-group-list:hover{ color: #000; } .list-group-list:nth-child(1){ border-bottom: none!important; } .panel{ border-bottom: 1px solid #ddd; } .router-link-active{ color: red; } </style>
<router-view :msg="msg"></router-view>
使用方法:
<template> <div> <h2>我是about组件</h2> <input type="text" style="width:200px;border:1px solid #ddd;margin-left:30px;"> <P>{{msg}}</P> <hr/> </div> </template> <script> export default{ props:{ msg:String } } </script> <style> h2{ color: red; } </style>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法