vue.js 知识点(二)
关于vue看到有很多的知识点和react有很多相近的地方,比如说路由还有一些简单的运用,但是又有一些不同,比如格式、还有写法的一些不同!
所以在这里我总结一下关于vue 关于路由的一些运用:
路由:
1、在总页面中设置路由以及参数名,例如
{
path:"/hellopage/:id",
name:'hellopage',
component:hellopage
}
2、在新页面进行配制文件,
这样点击之后就会跳转到新的页面,有两种方式:
一:通过路由跳转 :to="/路径/参数"
二:通过点击按钮,触发函数跳转 @click="跳转函数名”
<div>
<router-link :to="{path:'/hellopage/123'}">第一个点击跳转</router-link>
<router-link :to="{path:'/hellopage/789“ query:{userid:9855,username:'liumcb‘}}>第一个点击跳转</router-link>
<button @click="clickhandle">这是点击跳转按钮</button>
</div>
如果是路由跳转,不需要在这个页面有什么额外操作了,若是函数跳转, 则需要添加新的一些methods方法
methods:{
clickpage:function(){
this.$router.path({path:"/hellopage/224",query:{userid:566,name:"liumcb2"}})
}
}
3、在新的页面接受参数
export default {
name:"hellopage",
data(){
return (){
//设置接受参数的参数名
id:this.$route.params.id. //接受参数,这个参数就是第一个页面中,配制的参数
userid:this.$route.query.userid, //这个参数是从路由中接收到的设置的query参数
username:this.$route.query.name
}
}
}
在新的页面中使用这些参数
<div>
<p>接受的参数id:<span>{{{id}}</span></p>
<p>接受的参数userid:<span>{{userid}}</span></p>
<p>接受的参数username:<span>{{username}}</span></p>
</div>
总结起来 这就是路由的一些用法了,看起来跟react十分相似;
1、其中router-link 中可以添加query={id:'123‘} query的作用是给链接后面拼接内容。
例如,原来是 newpage/123?id=123
所以,当为链接添加更多参数的时候,可以使用query参数进行拼接url
2、给页面添加子页面的时候,在需要添加子页面的地方添加
vue.js 知识点(二)的更多相关文章
- vue.js 知识点(四)
看完了vue.js的官方文档,大概对这些知识有了那么一点的了解了,但是很多具体的运用还不太清楚,现在就总结一下,关于其中的一些知识点的运用: v-bind: 动态绑定指令,默认情况下,是给html ...
- vue.js(二)
一个实例: html: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset= ...
- Vue.js随笔二(新建路由+component+添加样式+变量的显示)
创建一个页面: 1.首先让我们看一下整个vue.js的目录,如下图所示: 2.现在让我们创建一个页面吧: 2-1首先你需要新建路由(就和建立一个如何找到项目文件的目录一个意思):进入src/route ...
- Vue.js知识点总结
1. Vue.js简介 1.1 Vue.js简介 1.2 创建一个vue实例 2. Vue.js基础 2.1 模板语法 2.2 环境搭建 2.3 生命周期钩子
- 从零开始学 Web 之 Vue.js(二)过滤器,按键修饰符,自定义指令
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 浅尝Vue.js组件(二)
本篇目录: 插槽(Slot) 插槽内容 作用域 具名插槽 作用域插槽 独占默认插槽的缩写语法 解构插槽Prop 使用场景举例 动态插槽名 具名插槽缩写 动态组件&keep-alive 异步组件 ...
- vue.js 知识点(三)
---恢复内容开始--- vue和react相同,都是单项数据流,也就是只能从父组件流向子组件,但是因为根据引用的不同,子组件也是可以经过函数处理流向父组件的!这点跟react十分相似,但是也有不同: ...
- Vue.js基础(二)
属性 可以将数据进行计算得出新的结果,也可以说是一个公式,有缓存. 应用:1,频繁使用的复杂公式. 2,需要监控的-----全局状态的管理 简写: computed:{ result:functi ...
- Vue.js先入个门看看
使用vue.js原文介绍:Vue.js是一个构建数据驱动的web界面库.Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件.vue.js上手非常简单,先看看几个例子: 例一: ...
随机推荐
- kubernetes role
https://kubernetes.io/docs/admin/authorization/rbac/
- Linux实战教学笔记39:Mha-Atlas-MySQL高可用方案实践(一)
一,mysql-mha环境准备 1.1 实验环境: 主机名 IP地址(NAT) 描述 mysql-db01 eth0:192.168.0.51 系统:CentOS6.5(6.x都可以) 安装:mysq ...
- linux系统文件的链接
一. 硬链接(实际链接) (以linux系统为例) 1. 文件的索引节点inode 假设我们在硬盘当前目录下建立了一个名为mytext文本文件,其内容只有一行:This is my file. (1) ...
- Apache CloudStack Features
As a mature and turnkey Infrastructure-as-a-Service (IaaS) platform, Apache CloudStack has a compreh ...
- Cocos2dx之touch事件
今天看了下ccocos2dx touch事件部分的源码,从CCTouch.CCTouchHandler和CCTouchDispatcher简单的做了分析和总结,先直接看源码吧! 1.CCTouch c ...
- 使用dataview组件显示服务器端xml文件数据
来自<sencha touch权威指南>,约193页开始 ------------------------------------- (1)app.js代码: Ext.require([' ...
- Luogu 4726 【模板】多项式指数函数
补补补…… 这个题的解法让我认识到了泰勒展开的美妙之处. 泰勒展开 泰勒展开就是用一个多项式型的函数去逼近一个难以准确描述的函数. 有公式 $$f(x)\approx g(x) = g(x_0) + ...
- ubuntu 16.04 Samba服务器搭建
搭建Samba服务器是为了实现Linux共享目录之后,在Windows可以直接访问该共享目录. 现在介绍如何在ubuntu 16.04系统中搭建Samba服务. 1.安装Samba服务 sudo ap ...
- json日期格式话
// 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符, // 年(y)可以用 1-4 个占 ...
- requests对象
属性 0.HttpRequest.scheme 表示请求方案的字符串(通常为http或https) 1.HttpRequest.body 一个字符串,代表请求报文的主体.在处理非 HTTP 形式的报文 ...