<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传值的更多相关文章

  1. vue 动态路由 Get传值

    main.js //2.配置路由 注意:名字 const routes = [ { path: '/home', component: Home }, { path: '/news', compone ...

  2. koa 基础(五)动态路由的传值

    1.动态路由的传值 app.js /** * 动态路由的传值 */ // 引入模块 const Koa = require('koa'); const router = require('koa-ro ...

  3. Vue 动态路由传值

    一.动态路由传值 1.配置动态路由: const routes = [ //动态路由路径参数以:开头 { path: '/Content/:aid', component:Content}, ] 2. ...

  4. vue动态路由传值以及get传值及编程式导航

    1.动态路由传值 1.配置路由处 { path: '/content/:id', component: Content }, // 动态路由 2.对应页面传值 <router-link :to= ...

  5. vue动态路由

    我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.能够提供参数的路由即为动态路由第一步:定义组件 c ...

  6. vue——动态路由以及地址传参

    动态路由: 当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向同一个组件,这时候从不同组件进入一个”共用”的组件,并且还要传参数,渲染不同的数据 这就要用到动态路由跟路由传参了! 1 ...

  7. Vue 动态路由的实现以及 Springsecurity 按钮级别的权限控制

    思路: 动态路由实现:在导航守卫中判断用户是否有用户信息,通过调用接口,拿到后台根据用户角色生成的菜单树,格式化菜单树结构信息并递归生成层级路由表并使用Vuex保存,通过 router.addRout ...

  8. vue 动态组件的传值

    vue项目开发中会用到大量的父子组件传值,也会用到动态组件的传值,常规子组件获取父组件的传值时,第一次是获取不到的,这时候有两种解决方案 第一种: 父组件向子组件传的是一个json对象,ES6的方法O ...

  9. 18 vue 动态路由传参

    params形式 http://192.168.1.100:8080/#/infoDetailed/231 //定义路由{ path: "/infoDetailed/:newsId" ...

随机推荐

  1. java BIO NIO IO

    参考 https://www.cnblogs.com/zedosu/p/6666984.html 摘要: 关于BIO和NIO的理解 最近大概看了ZooKeeper和Mina的源码发现都是用Java N ...

  2. Multiple network matches found for name 'selfservice', use an ID to be more specific.报错

    今天正在做openstack实例时输入neutron subnet-create --name selfservice   --dns-nameserver 114.114.114.114 --gat ...

  3. 0025SpringMVC的几种响应方式

    本文主要涉及到一下几种响应方式: 1.返回字符串2.返回void3.返回ModelAndView4.转发关键字forward和重定向关键字redirect返回字符串5.ajax调用返回json 具体实 ...

  4. Java中复合赋值运算符自动进行强制类型转换

    public class Operation { public static void main(String[] args) { int num1 = 10; num1 = num1 / 2.2; ...

  5. 多线程编程threading

    操作系统能够调度和切换的最小单元实际上是线程.对于IO操作来说,多线程和多进程性能差别不大.有两种方法可以进行多线程编程. 1.使用多线程编程的两种方法 (1)直接实例化一个Thread对象 from ...

  6. 微信扫描二维码跳转手机默认浏览器打开下载app的链接是怎么实现的

    此方法可以实现微信内置浏览器跳转到手机其它浏览器,现在网上其它的方法都只是一个页面,让访问者自己手动点右上角浏览器打开,而这个不同,是可以直接自动跳转的. <?php error_reporti ...

  7. web实现大文件上传分片上传断点续传

    需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...

  8. windows api多线程

    windows api多线程  原文地址:https://www.cnblogs.com/flowingwind/p/8452693.html 线程是程序中一个单一的顺序控制流程.在单个程序中同时运行 ...

  9. 35、sparkSQL及DataFrame

    一.saprkSQL背景 Spark 1.0版本开始,推出了Spark SQL.其实最早使用的,都是Hadoop自己的Hive查询引擎:但是后来Spark提供了Shark:再后来Shark被淘汰,推出 ...

  10. 1045 Favorite Color Stripe (30)

    Eva is trying to make her own color stripe out of a given one. She would like to keep only her favor ...