动态路由:

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

  1. Reactjs之静态路由、动态路由以及Get传值以及获取

    1.新增知识点 /* react路由的配置: 1.找到官方文档 https://reacttraining.com/react-router/web/example/basic 2.安装 cnpm i ...

  2. Vue 动态路由传值

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

  3. vue 动态路由 Get传值

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

  4. Vue动态路由 Get传值

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

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

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

  6. vue动态路由

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

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

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

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

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

  9. Angular配置路由以及动态路由取值传值跳转

    Angular配置路由 1.找到 app-routing.module.ts 配置路由 引入组件 import { HomeComponent } from './home/home.componen ...

  10. 十四、 React路由(react-router4.x): 动态路由、get传值、React中使用url模块

    概述 新闻列表 -跳转-> 详情页 时,想把列表对应的id传到详情页里,可用到三种传值方法: 1.动态路由传值 2.get传值 3.localstorage传值 一.动态路由传值 [App.js ...

随机推荐

  1. node.js和socket.io实现im

    im——Instant Messaging 即时通讯 基本技术原理 (1)通过IM服务器登陆或注销 (2)用户A通过列表找到B,用户B获得消息并与之交谈 (3)通过IM服务器指引建立与B单独的通讯通道 ...

  2. Ajax请求全局配置

    摘要: jQuery已经成为项目中最常见的js库,也是前端开发最喜欢使用的库.下面是在项目中封装了jQuery的Ajax,分享给大家. 代码: // ajax 请求参数 var ajaxSetting ...

  3. 开发kendo-ui弹窗组件

    摘要: kendo-ui中只是提供了windwo插件,并没有提供页内弹窗插件.现在分享项目中自己定制的基于window组件的弹窗插件,如果你的项目也是用的kendo-ui,只需要将组件代码引到项目中即 ...

  4. [原]IOS 设备基本信息

    1.获取设备类型  (Iphone/ipad 几?) #import "sys/utsname.h" -(NSString*)getDeviceVersion{    struct ...

  5. 【一步步学OpenGL 21】 -《聚光灯光源》

    教程 21 聚光灯光源 原文: http://ogldev.atspace.co.uk/www/tutorial21/tutorial21.html CSDN完整版专栏: http://blog.cs ...

  6. getActionBar().setDisplayHomeAsUpEnabled(true)报空指针(已解决)

    今天捣鼓了一下午.getActionBar().setDisplayHomeAsUpEnabled(true)总是报空指针.在我的还有一个Android4.4.2的项目中就没有一点问题.我还以为是我自 ...

  7. 8 -- 深入使用Spring -- 7...3 让Spring管理控制器

    8.7.3 让Spring管理控制器 让Spring容器来管理应用中的控制器,可以充分利用Spring的IoC特性,但需要将配置Struts 2 的控制器部署在Spring容器中,因此导致配置文件冗余 ...

  8. Jackson Gson Json.simple 比较

    为公司做了小任务,需要用到Java Json库,Json库我几个月之前就用过,不过那时候是跟着项目来的,延续了项目的使用习惯直接用了jackson Json,而这次我觉得好好比较一下几个常见的Json ...

  9. C#(少用的)

    挖一挖C#中那些我们不常用的东西之系列(1)——ToDictionary,ToLookup 挖一挖C#中那些我们不常用的东西之系列(2)——IsXXX 系列方法 挖一挖C#中那些我们不常用的东西之系列 ...

  10. 初试WebSocket构建聊天程序

    上一篇文章中使用了Ajax long polling实现了一个简单的聊天程序,对于web实时通信,今天就来试用一下基于WebSocket的长连接方式. WebSocket简介 为了增强web通信的功能 ...