Vue动态路由 Get传值
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div id="home">
我是首页组件 <ul>
<li v-for="(item,key) in list">
<router-link :to="'/pcontent?id='+key">{{key}}--{{item}}</router-link>
</li>
</ul>
</div>
</template> <script>
export default{
data(){
return {
msg:'我是一个home组件',
list:['商品111111','商品222222','商品333333']
}
}
} </script> <style lang="scss" scoped> </style>
<template> <div id="content">
pcontent 商品详情
</div>
</template> <script> export default{ data(){ return{ msg:'数据'
}
},
mounted(){ //获取get传值 console.log(this.$route.query);
} }
</script>
<template>
<div id="news">
我是新闻组件 <ul>
<li v-for="(item,key) in list">
<router-link :to="'/content/'+key">{{key}}--{{item}}</router-link>
</li>
</ul> </div> </template> <script> export default{
data(){
return {
msg:'我是一个新闻组件' ,
list:['111111','222222','333333']
}
}
} </script> <style lang="scss" scoped> </style>
<template> <div id="content">
我是详情页面
</div>
</template> <script> export default{ data(){ return{ msg:'数据'
}
},
mounted(){ console.log(this.$route.params); /*获取动态路由传值*/ } }
</script>
Vue动态路由 Get传值的更多相关文章
- vue 动态路由 Get传值
main.js //2.配置路由 注意:名字 const routes = [ { path: '/home', component: Home }, { path: '/news', compone ...
- koa 基础(五)动态路由的传值
1.动态路由的传值 app.js /** * 动态路由的传值 */ // 引入模块 const Koa = require('koa'); const router = require('koa-ro ...
- Vue 动态路由传值
一.动态路由传值 1.配置动态路由: const routes = [ //动态路由路径参数以:开头 { path: '/Content/:aid', component:Content}, ] 2. ...
- vue动态路由传值以及get传值及编程式导航
1.动态路由传值 1.配置路由处 { path: '/content/:id', component: Content }, // 动态路由 2.对应页面传值 <router-link :to= ...
- vue动态路由
我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.能够提供参数的路由即为动态路由第一步:定义组件 c ...
- vue——动态路由以及地址传参
动态路由: 当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向同一个组件,这时候从不同组件进入一个”共用”的组件,并且还要传参数,渲染不同的数据 这就要用到动态路由跟路由传参了! 1 ...
- Vue 动态路由的实现以及 Springsecurity 按钮级别的权限控制
思路: 动态路由实现:在导航守卫中判断用户是否有用户信息,通过调用接口,拿到后台根据用户角色生成的菜单树,格式化菜单树结构信息并递归生成层级路由表并使用Vuex保存,通过 router.addRout ...
- vue 动态组件的传值
vue项目开发中会用到大量的父子组件传值,也会用到动态组件的传值,常规子组件获取父组件的传值时,第一次是获取不到的,这时候有两种解决方案 第一种: 父组件向子组件传的是一个json对象,ES6的方法O ...
- 18 vue 动态路由传参
params形式 http://192.168.1.100:8080/#/infoDetailed/231 //定义路由{ path: "/infoDetailed/:newsId" ...
随机推荐
- WebAssembly(wasm)是什么?——学习
WebAssembly 是一种可以使用非 JavaScript 编程语言编写代码并且能在浏览器上运行的技术方案. 参考文章标题:几张图让你看懂WebAssembly 参考地址:https://www. ...
- java 静态代码块和spring @value等注解注入顺序
java 静态代码块和spring @value等注解注入顺序 问题所在 先上代码 java方法 @Value("${mf.cashost}") public static S ...
- Oracle数据库的分页
Oracle的分页 ORACLE支持一个关键字ROWNUM,ROWNUM是一个伪列,该列不存在于任何一张表中,但是每张表都可以查询该列. 而该列在结果集的中值是结果集中每条记录的"行号&qu ...
- Linux cut 用法
cut是一个选取命令,就是将一段数据经过分析,取出我们想要的.一般来说,选取信息通常是针对"行"来进行分析的,并不是整篇信息分析的. )其语法格式为:cut [-bn] [fil ...
- 使用Fiddler抓包抓取不了数据包的问题
一:(我)抓包遇到的问题. ①:抓包一直出现这个问题 解决办法: 如果你遇到上面的问题,就可能是证书的问题(我的本地证书是用系统生成证书的一个软件生成的个人证书,所以出现了问题,我抓的所有数据都出现 ...
- Codeforces Round #604 (Div. 2) A,B,C【D题待补】
思路:直接暴力判断就OK了 #include<bits/stdc++.h> using namespace std; #define int long long signed main() ...
- C# mysql 处理 事务 回滚 提交
MySqlConnection myCon; void iniMysql() { //连接数据库 myCon = new MySqlConnection("server=127.0.0.1; ...
- (Python) SOAP Web Service (HTTP POST)
功能很强大,可惜只有试用 https://www.example-code.com/python/soap_web_service.asp
- Spring入门(二)——DI
1. DI Dependency Injection,依赖注入.当对象里有属性或对象的时候,就需要为这些属性或对象赋值 2. 流程 这里介绍两种方式 set方法 注解方式 2.1 set方法 Bean ...
- TPS与QPS,以及GMV
TPS是指每秒处理事务的个数,处理的载体可以是单台服务器,也可以是一个服务器集群. 例如:下单接口,一秒内,下单完成次数为1000,则下单接口总 tps = 1000,共有10台服务器提供下单服务,单 ...