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 ...
随机推荐
- mysql add foreign key 不成功
今天修改了mysql数据表的结构,然后添加外键index一直不成功: 查到问题在于,被外键的表,引擎不是Innodb,而是MyISAM. 修改好,以后保存报错: 解决办法,将数据库表里的数据全部删除, ...
- 【高级算法】遗传算法解决3SAT问题(C++实现)
转载请注明出处:http://blog.csdn.net/zhoubin1992/article/details/46910079 1 SAT问题描写叙述 命题逻辑中合取范式 (CNF) 的可满足性问 ...
- SpringMVC-----使用Maven创建Web项目
1.创建一个Maven的project 2.不使用骨架,去掉勾 3.这里的Packing 选择 war的形式 由于packing是war包,那么下面也就多出了webapp的目录 4.由于我们的项目要使 ...
- Go之类型判断
boy := util.Boy{util.Person{"Eric", 19, "boy"}, "1"} var boyClone inte ...
- ios开发之--[_NSInlineData objectForKeyedSubscript:]
reason: '-[_NSInlineData objectForKeyedSubscript:]: unrecognized selector sent to instance 0x7fa2049 ...
- ios开发之--VC的生命周期
当一个视图控制器被创建,并在屏幕上显示的时候. 代码的执行顺序 1. alloc 创建对象,分配空间 2.init (initWit ...
- 【代码审计】UKCMS_v1.1.0 文件上传漏洞分析
0x00 环境准备 ukcms官网:https://www.ukcms.com/ 程序源码下载:http://down.ukcms.com/down.php?v=1.1.0 测试网站首页: 0x0 ...
- 如何使用Web Service新建和更新Wiki页面的内容
公司内部有很多部门都创建了Wiki库,来做知识共享.公司是Hosting的SharePoint环境,不能写服务器端代码,要操作Wiki只能通过Web Service来完成,所以,碰到两个情况: 1)W ...
- 获取预制和获取gameObject
using UnityEngine; using System.Collections; using System.Collections.Generic; using UnityEditor; pu ...
- 项目适配iOS9遇到的一些问题及解决办法(更新两个小问题)
本文转载至 http://www.bubuko.com/infodetail-1110714.html http://www.jianshu.com/p/631bd7f12a38 1.网络请求报错.升 ...