vue-router 利用url传递参数 

 :冒号的形式传递参数

  在路由配置文件里以:冒号的形式传递参数,这就是对参数的绑定。

1. 在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。

{
path:'/params/:newsId/:newsTitle',
component:Params
}

我们需要传递参数是新闻ID(newsId)和新闻标题(newsTitle).所以我们在路由配置文件里制定了这两个值。

2. 在src/components目录下建立我们params.vue组件,也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。

<template>
<div>
<h2>{{ msg }}</h2>
<p>新闻ID:{{ $route.params.newsId}}</p>
<p>新闻标题:{{ $route.params.newsTitle}}</p>
</div>
</template> <script>
export default {
name: 'params',
data () {
return {
msg: 'params page'
}
}
}
</script>

vue-router 利用url传递参数的更多相关文章

  1. Vue-router 第5节 vue-router利用url传递参数

    Vue-router 第5节 vue-router利用url传递参数 目录 Vue-router 第5节 vue-router利用url传递参数 第5节 vue-router利用url传递参数 冒号的 ...

  2. Vue Router 获取url路径参数 query

    https://router.vuejs.org/zh/api/#路由对象属性 $route.query 类型: Object 一个 key/value 对象,表示 URL 查询参数.例如,对于路径  ...

  3. vue-router利用url传递参数

    app.vue <template> <div id="app"> <router-link to="/">home< ...

  4. Vue 给子组件传递参数

    Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...

  5. Liferay中利用URL传参数

    业务场景:现在有一个新闻系统,有两个页面,A是新闻列表页面/web/guest/home,B是新闻的详情页面/web/guest/newsview. 业务逻辑为:在A页面中,点击新闻的标题进入B页面, ...

  6. 【Django】url传递参数

    1.  url传递参数的特殊字符 在压缩后,可能出现  +  -  = 空格  这类特殊字符,需要在传递前进行url编码  urllib.enquote(string) 获取参数后 urllib.un ...

  7. 8)django-示例(url传递参数)

    url传递参数有两种,一个是通过普通分组方式,一个是通过带命名分组方式 1.传递方式 1)普通分组方式,传递参数顺序是严格的.如下例子 url(r'^detail-(\d+)-(\d+).html', ...

  8. html5页面与android页面之间通过url传递参数

    html5页面与android页面之间可以通过url传递参数,android将参数放在htm5的url  ?后面,js获取url  ?号后面的参数. 方法一: <scrīpt> /* 用途 ...

  9. 用URL传递参数

    用URL传递参数,在园子里找到一篇文章解决了自己的问题,地址如下:http://www.cnblogs.com/lolicon/archive/2009/01/19/1378408.html

随机推荐

  1. new 运算符的原理

    关于 new 运算符的原理: 1.红宝书上解释: (1)创建一个新对象 (2)将构造函数的作用域赋给新对象 (3)执行构造函数中的代码 (4)返回新对象 2.MDN上的解释: (1)一个继承自 Foo ...

  2. Spring4- 04-Spring简易整合Mybatis -导入jar包/ 正常编写pojo/ 编写spring 配置文件

    笔记要点&出错分析与总结 POJO(Plain Ordinary Java Object)简单的Java对象,实际就是普通JavaBeans,工程组织   (AirportService为机场 ...

  3. 《代码敲不队》第九次团队作业:Beta冲刺与验收准备

    项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 代码敲不队 作业学习目标 (1)掌握软件测试基础技术(2)学习迭代式增量软件开发过程(Scrum) ...

  4. sizeof的注意点

    sizeof('a')的值为4.因为此处‘a’是独立存在的一个字符(没有赋值给其它变量),实际上就是一个整型数,占4个字节,即此处‘a’对应的ascii码的十进制为整数97.(貌似解释得有些牵强,但事 ...

  5. ssh远程后台运行

    ssh hadoop8 "/export/server/storm/bin/storm nimbus >/export/server/storm/nimbus_start.log 2& ...

  6. C# 调用 C++ Dll 类型转换的方式 全

    摘要:C#引用C++ Dll 所有类型转换的方式         //C++中的DLL函数原型为         //extern "C" __declspec(dllexport ...

  7. BZOJ 3625:小朋友和二叉树 多项式开根+多项式求逆+生成函数

    生成函数这个东西太好用了~ code: #include <bits/stdc++.h> #define ll long long #define setIO(s) freopen(s&q ...

  8. include和taglib指令

    1.include指令用来包含另一个静态文件,这个静态文件可以是一个JSP页面.一个Servlet.文本文件.JSP代码. include.jsp <%@ page contentType=&q ...

  9. Servlet实现注册

    1.Servlet实现注册的思路: 2.工程结构 3.功能实现: (1)html实现对数据的收集: <body bgcolor="aqua"> <center&g ...

  10. 学校的信息课(备战会考)LZ没带笔……

    IP地址 四段十进制数组成(四个字节,32个二进制位数,一个字节八位) 用“.”隔开 每一段的取值范围[0,255] 分类:看第一个字节(见到的大多为B,C类) A:1~126    B:128~19 ...