vue,一路走来(7)--响应路由参数的变化
今天描述的问题估计会有很多人也遇到过。
vue-router多个路由地址绑定一个组件造成created不执行
也就是文档描述的,如下图

我的解决方案:
created () {
console.log(this.getStatus(this.$route.path))
this.userpath() //我要执行的函数
},
methods: {
getStatus (urlStr) {
var urlStrArr = urlStr.split('/')
return urlStrArr[urlStrArr.length - ]
}
},
watch: {
'$route' (to, from) {
console.log(this.getStatus(this.$route.path))
this.userpath() //再次调起我要执行的函数
}
}
vue之watch用法
项目中刚好也用到了需要检测某值是否发生了变化,获取最新的值。就分享一下
vue单文件组件写法:
<template>
//观察数据为字符串或数组
<input v-model="example0"/>
<input v-model="example1"/>
//当单观察数据examples2为对象时,如果键值发生变化,为了监听到数据变化,需要添加deep:true参数
<input v-model="example2.inner0"/>
</template>
<script>
export default {
data(){
return {
example0:"",
example1:"",
example2:{
inner0:,
innner1:
}
}
},
watch:{
example0(curVal,oldVal){
console.log(curVal,oldVal);
},
example1:'a',//值可以为methods的方法名
example2:{
//注意:当观察的数据为对象或数组时,curVal和oldVal是相等的,因为这两个形参指向的是同一个数据对象
handler(curVal,oldVal){
conosle.log(curVal,oldVal)
},
deep:true
}
},
methods:{
a(curVal,oldVal){
conosle.log(curVal,oldVal)
}
}
}
</script>
项目中还遇到了需要使用md5加密,分享一个不错的网址http://blog.csdn.net/qq_35844177/article/details/70597597
vue,一路走来(7)--响应路由参数的变化的更多相关文章
- vue-router 响应路由参数的变化
提醒一下,当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用.因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效.不过,这也意味着组件的生命周 ...
- vue,一路走来(1)--构建vue项目
2016年12月--2017年5月,接触前端框架vue,一路走来,觉得有必要把遇到的问题记录下来. 那时,vux用的是1.0的vue,然而vue2.0已经出来了,于是我结合了mint-ui一起来做项目 ...
- vue,一路走来(2)--路由vue-router
安装 Mint UI cnpm install mint-ui --save 如果你的项目会用到 Mint UI 里较多的组件,最简单的方法就是把它们全部引入.此时需要在入口文件 main.js 中: ...
- vue中监听路由参数的变化
在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this. ...
- vue,一路走来(13)--vue微信分享
vue微信分享 今天记录一下vue微信分享. 1.先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”.这个不多说,见文档,只有绑定了才能进行下一步的动作 2.需要引入js文件 ...
- vue,一路走来(5)--微信登录
微信登录 今天又是周末了,想着博客还没记录完成.是的,下面记录一下微信登录遇到的问题. 在我的项目中,个人中心是需要完成授权登录才可以访问的,首先在定义路由的时候就需要多添加一个自定义字段requir ...
- vue,一路走来(3)--数据交互vue-resource
所有的静态页面布局完成后,最重要的就是数据交互了,简单来说,vue-resource就像jquery里的$.ajax,用来和后台交互数据的.放在created或ready里运行来获取或者更新数据的.不 ...
- vue,一路走来(17)--vue使用scss,并且全局引入公共scss样式
最近朋友问如何在vue项目中使用scss样式,想起之前项目是直接在main.js直接import css文件的,然而main.js不可以直接import scss文件. import './asset ...
- vue,一路走来(16)--本地及手机调试
闲暇时间记录一下如何绑定域名,实现本地及手机调试的过程.我的是微信开发项目,很多功能及操作都是基于微信来开发的,理所当然的就用到微信开发者工具了. 1.首先打开目录C:\Windows\System3 ...
随机推荐
- 【HbuilerX-Bug】终端无法显示打印信息,也无法输入
经过调试HbuilderX“终端”插件,最终定位问题,问题是插件在打开终端时,无法定位具体的窗口程序,如“cmd.exe”.“powershell.exe”等.可能产生原因:1.可能是电脑系统升级产生 ...
- Python随笔——Map之键对应多值的处理
在使用 Python 处理时,因为某些原因,可能遇到 Map 的键对应多个值的处理. 很常见的比如:查询某表的结果,对应了多条记录. 此时使用Python进行算法处理时,其中一种方式如下: 定义一个 ...
- Linux系统下安装jenkins使用
jenkins 2.190.1 yum 安装 devops一梦千年 发布时间:10-0916:28 jenkins 2.190.1 yum 安装记录 安装环境: 所需安装包: https://pkg. ...
- Dubbo学习-5-监控中心simpleMonitor搭建
之前已经下载好的dubbo-admin-master源码中,有dubbo-monitor-simple工程,同理,使用maven命令打包成一个可执行的jar包: 1.进入dubbo-monitor-s ...
- 程序猿看了要xiao了
一. 程序猿问科比:“你为什么这么成功? ”科比:“你知道洛杉矶凌晨四点是什么样子吗? ”程序猿:“知道,一般那个时候我还在写代码,怎么了?”科比:“额…….” 二. 女神:你能让这个论坛的人都吵起来 ...
- Python全栈开发,Day3
一.基本数据类型 基础数据类型,有7种类型,存在即合理. 1.int 整数 主要是做运算的.比如加减乘除,幂,取余 + - * / ** % ... 2.bool 布尔值 判断真假以及作为条件变量 ...
- [转]Html.DropDownList()的用法 ( Asp.Net MVC)
Html.DropDownList()赋默认值: 页面代码如下: <% List<SelectListItem> list = new List<SelectListItem& ...
- 手动ubuntu 18.04修改登录锁屏界面效果(含登录背景修改)flat-remix
前言 在ubuntu 18.04,可以通过修改/etc/alternatives/gdm3.css来进行修改 本来想直接使用flat-remix主题,但是只有这个登录界面没有达到作者演示的效果,所以手 ...
- Drawer实现侧边栏布局
在 Scaffold 组件里面传入 drawer 参数可以定义左侧边栏,传入 endDrawer 可以定义右侧边栏.侧边栏默认是隐藏的,我们可以通过手指滑动显示侧边栏,也可以通过点击按钮显示侧边栏. ...
- Search Engine Hacking – Manual and Automation
Search Engine Hacking – Manual and Automation Ethical Hacking Boot Camp OUR MOST POPULAR COURSE! CLI ...