vue--动态路由和get传值
动态路由:
<template>
<div id="News">
<v-header></v-header>
<hr>
{{title}}
<br>
<p v-for="(x,k) in list">
<!-- <router-link to="/content/123">{{k}}-{{x}}</router-link> -->
<!-- 因为要绑定我们的动态数据 所以要用 : 然后做拼接 -->
<router-link :to="'/content/'+k">{{k}}-{{x}}</router-link>
</p>
</div>
</template>
<script>
import Header from './Header.vue';
export default {
name: 'News',
data () {
return {
title:'我是新闻News组件',
list:['111','222','3330','444']
}
},
methods:{},
components:{
'v-header':Header,
}
}
</script>
点击之后能够跳转到一个详情:可以新建一个详情的组件:
<template>
<div id="content">
{{title}}----{{aid}}
</div>
</template>
<script>
export default {
name: 'Header',
data () {
return {
title:'我是一个详情页面',
aid:'',
}
},
methods:{
run(){},
},
mounted(){
// 获取传递过来的动态路由的值
console.log(this.$route.params);
console.log(this.$route.params['aid']);
this.aid = this.$route.params['aid'];
}
}
</script>
</script>
此时还需要配置路由:
// 1、创建组件
import Header from './components/Header.vue'
import Home from './components/Home.vue'
import News from './components/News.vue'
import Content from './components/Content.vue' // 2、配置路由
const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News },
{ path: '/content', component: Content },
{ path: '/content/:aid', component: Content },
{ path: '*', redirect:'/home'}, // 默认跳转路由
]
get传值:
<p v-for="(x,k) in list">
<!-- <router-link to="/content?aid=123">{{k}}-{{x}}</router-link> -->
<router-link :to="'/content?aid='+k">{{k}}-{{x}}</router-link>
</p>
配置路由:
// 2、配置路由
const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News },
{ path: '/content', component: Content },
{ path: '*', redirect:'/home'}, // 默认跳转路由
]
获取参数:
mounted(){
// 获取get传递过来的动态路由的值
console.log(this.$route.query);
console.log(this.$route.query['aid']);
this.aid = this.$route.query['aid'];
}
vue--动态路由和get传值的更多相关文章
- Reactjs之静态路由、动态路由以及Get传值以及获取
1.新增知识点 /* react路由的配置: 1.找到官方文档 https://reacttraining.com/react-router/web/example/basic 2.安装 cnpm i ...
- Vue 动态路由传值
一.动态路由传值 1.配置动态路由: const routes = [ //动态路由路径参数以:开头 { path: '/Content/:aid', component:Content}, ] 2. ...
- vue 动态路由 Get传值
main.js //2.配置路由 注意:名字 const routes = [ { path: '/home', component: Home }, { path: '/news', compone ...
- Vue动态路由 Get传值
<template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> 我是首页组件 <ul> < ...
- vue动态路由传值以及get传值及编程式导航
1.动态路由传值 1.配置路由处 { path: '/content/:id', component: Content }, // 动态路由 2.对应页面传值 <router-link :to= ...
- vue动态路由
我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.能够提供参数的路由即为动态路由第一步:定义组件 c ...
- vue——动态路由以及地址传参
动态路由: 当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向同一个组件,这时候从不同组件进入一个”共用”的组件,并且还要传参数,渲染不同的数据 这就要用到动态路由跟路由传参了! 1 ...
- Vue 动态路由的实现以及 Springsecurity 按钮级别的权限控制
思路: 动态路由实现:在导航守卫中判断用户是否有用户信息,通过调用接口,拿到后台根据用户角色生成的菜单树,格式化菜单树结构信息并递归生成层级路由表并使用Vuex保存,通过 router.addRout ...
- Angular配置路由以及动态路由取值传值跳转
Angular配置路由 1.找到 app-routing.module.ts 配置路由 引入组件 import { HomeComponent } from './home/home.componen ...
- 十四、 React路由(react-router4.x): 动态路由、get传值、React中使用url模块
概述 新闻列表 -跳转-> 详情页 时,想把列表对应的id传到详情页里,可用到三种传值方法: 1.动态路由传值 2.get传值 3.localstorage传值 一.动态路由传值 [App.js ...
随机推荐
- node.js和socket.io实现im
im——Instant Messaging 即时通讯 基本技术原理 (1)通过IM服务器登陆或注销 (2)用户A通过列表找到B,用户B获得消息并与之交谈 (3)通过IM服务器指引建立与B单独的通讯通道 ...
- Ajax请求全局配置
摘要: jQuery已经成为项目中最常见的js库,也是前端开发最喜欢使用的库.下面是在项目中封装了jQuery的Ajax,分享给大家. 代码: // ajax 请求参数 var ajaxSetting ...
- 开发kendo-ui弹窗组件
摘要: kendo-ui中只是提供了windwo插件,并没有提供页内弹窗插件.现在分享项目中自己定制的基于window组件的弹窗插件,如果你的项目也是用的kendo-ui,只需要将组件代码引到项目中即 ...
- [原]IOS 设备基本信息
1.获取设备类型 (Iphone/ipad 几?) #import "sys/utsname.h" -(NSString*)getDeviceVersion{ struct ...
- 【一步步学OpenGL 21】 -《聚光灯光源》
教程 21 聚光灯光源 原文: http://ogldev.atspace.co.uk/www/tutorial21/tutorial21.html CSDN完整版专栏: http://blog.cs ...
- getActionBar().setDisplayHomeAsUpEnabled(true)报空指针(已解决)
今天捣鼓了一下午.getActionBar().setDisplayHomeAsUpEnabled(true)总是报空指针.在我的还有一个Android4.4.2的项目中就没有一点问题.我还以为是我自 ...
- 8 -- 深入使用Spring -- 7...3 让Spring管理控制器
8.7.3 让Spring管理控制器 让Spring容器来管理应用中的控制器,可以充分利用Spring的IoC特性,但需要将配置Struts 2 的控制器部署在Spring容器中,因此导致配置文件冗余 ...
- Jackson Gson Json.simple 比较
为公司做了小任务,需要用到Java Json库,Json库我几个月之前就用过,不过那时候是跟着项目来的,延续了项目的使用习惯直接用了jackson Json,而这次我觉得好好比较一下几个常见的Json ...
- C#(少用的)
挖一挖C#中那些我们不常用的东西之系列(1)——ToDictionary,ToLookup 挖一挖C#中那些我们不常用的东西之系列(2)——IsXXX 系列方法 挖一挖C#中那些我们不常用的东西之系列 ...
- 初试WebSocket构建聊天程序
上一篇文章中使用了Ajax long polling实现了一个简单的聊天程序,对于web实时通信,今天就来试用一下基于WebSocket的长连接方式. WebSocket简介 为了增强web通信的功能 ...