vue 动态路由 Get传值

时间:2022-06-30 15:40:06

main.js

 //2.配置路由   注意:名字

 const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News }, { path: '/content/:aid', component: Content }, /*动态路由*/ { path: '/pcontent', component: Pcontent }, { path: '*', redirect: '/home' } /*默认跳转路由*/
]

通过get传值获取路由参数

 <template>

     <div id="content">
商品详情
</div>
</template> <script> export default{ data(){ return{ msg:'数据'
}
},
mounted(){ //获取get传值 console.log(this.$route.query);
} }
</script>

动态路由获取参数

 <template>

     <div id="content">
我是详情页面
</div>
</template> <script> export default{ data(){ return{ msg:'数据'
}
},
mounted(){ console.log(this.$route.params); /*获取动态路由传值*/ } }
</script>

vue 动态路由 Get传值的更多相关文章

  1. Vue动态路由 Get传值

    <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> 我是首页组件 <ul> &lt ...

  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&quot ...

随机推荐

  1. 关于arcgis engine的工作空间(IWorkspace)和选择集&lpar;FeatureSelection&rpar;

    1.通过某个WorkspaceFactoryClass(例如AccessWorkspaceFactoryClass)拿到工作空间工厂接口,这时的OpenFromFile方法可以直接打开mdb类型文件, ...

  2. Expression Tree Basics 表达式树原理

    variable point to code variable expression tree data structure lamda expression anonymous function 原 ...

  3. Task set generation

    Task set generation for uni- and multiprocessors: “Unifying Fixed- and Dynamic-Priority Scheduling b ...

  4. 一款炫酷的幻灯片播放框架介绍(附demo及使用方法)

    废话不多说,先上demo(建议在chrome下打开 F键全屏 esc退出全屏): 我的demo-博客园简介 官网demo 更多demo 今天为大家介绍一款基于css3和JavaScript的幻灯片播放 ...

  5. 【MVC 过滤器的应用】ASP&period;NET MVC 如何统计 Action 方法的执行时间

    代码如下: using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; u ...

  6. 插入排序&lpar;C&plus;&plus;&rpar;

    插入排序(C++) 插入排序: 写这篇博文是为了增加对数据结构和算法的理解,同事增加编程的基本功. 当要对如下数据进行排序: 2,8,5,4,6,7,1 2,8,5,4,6,7,1    采用插入排序 ...

  7. 安装rac遇到的问题总结:

    1. 选择虚拟机工具 这个过程是非常的波折.这次安装也让我吸取了很大教训,获得了宝贵经验. 首先啊,必须了解rac的机制. 共享磁盘+多实例. 这就意味着,我们必须使用一个支持共享磁盘的虚拟机. 第一 ...

  8. 给tableView设置headerView时遇到的问题

    在ViewDidLoad里面设置了 self.tableView.tableHeaderView = 自定义的View 然后在模拟器上运行后,发现这个HeaderView挡住了后面的Cell,也就是c ...

  9. VRF在区块链中的应用

    最近区块链领域流行了一种"怪病",许多区块链项目或者设计方案都加入了一个叫做VRFs的算法.那么, (1) 什么是VRFs? (2) VRFs在区块链中解决了什么问题? 本文旨在介 ...

  10. 构建MySQL-Cluster

    Mysql Cluster概述与部署MySQL Cluster 是一种技术,该技术允许在无共享的系统中部署“内存中”数据库的 Cluster .通过无共享体系结构,系统能够使用廉价的硬件,而且对软硬件 ...