关于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上手非常简单,先看看几个例子: 例一: ...
随机推荐
-
LinqToDB 源码分析——生成表达式树
当我们知道了Linq查询要用到的数据库信息之后.接下就是生成对应的表达式树.在前面的章节里面笔者就已经介绍过.生成表达式树是事实离不开IQueryable<T>接口.而处理表达式树离不开I ...
-
Hadoop_HDFS HA 及解决方案
1. HDFS系统架构 HDFS(Hadoop Distributed File System),及Hadoop分布式文件系统 作用: 为Hadoop分布式计算框架提供高性能,高可靠,高可扩展的存储服 ...
-
跨平台渲染框架尝试 - Texture管理
纹理是渲染器重要的资源,也是比较简单的资源.本文将详细讨论纹理资源的管理. 在资源管理概述中提到,资源就是一堆内存和CPU与GPU的访问权限.纹理管理在资源管理之上,要负责如何使用者一堆内存构造纹理对 ...
-
vim乱码问题
有的时候使用gvim查看文本文件时,出现乱码,现在来确定下原因. 经过我的查资料,发现gvim里有几个关于编码设置的变量:encoding.fileencoding.fileencodings.ter ...
-
U盘重装系统win7
步骤: 1开机f12进入bios模式设置光盘的第一驱动 2U盘拷贝好的ghost镜像插入usb接口,重启默认U盘启动 3启动后进入重装系统界面,选择要重新的系统,进入pe系统,格式化c盘,后面默认自动
-
80x86汇编小站站长简单介绍
[人生格言] 1] 一生都用头脑而不是情绪解决这个问题 2] 仅仅有偏执狂才会成功 3] 在最困难时都要保持一份幽默感 4] 吾生也有涯,而知也无涯,以有涯随无涯,殆已 [简历] 我的生日: 1981 ...
-
Ubuntu 16.04.3 LTS 部署 Cloud Torrent
下载安装程序 apt install -y curl sudo curl https://i.jpillora.com/cloud-torrent! | bash 写配置文件 sudo vim /et ...
-
解决jenkins的内存溢出问题
在jenkins的控制台会看到如下信息: FATAL: Remote call on ime_checkcode failed java.io.IOException: Remote call on ...
-
SSD学习,keras
https://github.com/pierluigiferrari/ssd_keras
-
学生信息系统(json模块解决数据持久化)
将学生管理的案例,学生信息由原来的只有姓名,拓展为包含,姓名,年龄,两个属性:完成对应的增.删.查.改,操作 import json,os,time,sys student_list = [] Fil ...