精华内容
下载资源
问答
  • 就是在一个vue项目中引入了一个组件,点击这个组件跳转的还是当前的页面,只是传递的参数发生了变化,这个时候我们传递的参数就不能正常的赋值了,这是因为页面没有重新加载,所以我们就要监听地址栏的参数变化了。...

    问题:在开发过程中我们有可能会遇到一个问题,就是在一个vue项目中引入了一个组件,点击这个组件跳转的还是当前的页面,只是传递的参数发生了变化,这个时候我们传递的参数就不能正常的赋值了,这是因为页面没有重新加载,所以我们就要监听地址栏的参数变化了。
    1、传递参数

    	this.$router.push({
    	    path: url,//路由地址
    	    query:{//参数
    	        type: 1
    	    }
    	});
    

    2、监听参数变化

    	watch: {
    	    //监听路由地址的改变
    	    $route:{
    	        immediate:true,
    	        handler(){
    	            if(this.$route.query.type){//需要监听的参数
    	                this.type = this.$route.query.type
    	            }
    	        }
    	    }
    	}
    
    展开全文
  • VUE如何侦听url变化

    2021-11-01 19:35:27
    上面的图可以看出点击之后调试工具里面的数据和URL都发生了变化,所以我们可以侦听$route里面的数据,代码如下: watch: { $route (to, from) { if (to.fullPath === to.path) { this.form.subjectID = null ...

     现在页面上显示的都是大数据学科下的标签列表,需求时点击左侧导航标签按钮页面显示所有学科的标签列表

    点击之前:

     

     

     点击之后:

     

     上面的图可以看出点击之后调试工具里面的数据和URL都发生了变化,所以我们可以侦听$route里面的数据,代码如下:

     watch: {
        $route (to, from) {
          if (to.fullPath === to.path) {
            this.form.subjectID = null
            // 重新渲染数据
            this.loadList()
          }
        }
      }

    效果:

     

    展开全文
  • 在完成毕业设计(基于Vue的信息资讯展示与管理平台)的过程中,处理如下图所示的 点击左侧栏目列表跳转到对应文章列表 的问题时,初次点击可以跳转到对应的页面,但是当第二次点击时,虽然地址栏的参数改变了,也没有...

    在完成毕业设计(基于Vue的信息资讯展示与管理平台)的过程中,处理如下图所示的 点击左侧栏目列表跳转到对应文章列表 的问题时,初次点击可以跳转到对应的页面,但是当第二次点击时,虽然地址栏的参数改变了,也没有重新刷新页面中的内容。

    第1次,点击“潮科技”时显示的内容:

    44ff14094b204665f28f29418467369e.png

    第2次,点击“奇趣事”时显示的内容:

    70abdb64001ed0ed82e07781c8a80233.png

    造成上述情况的原因:

    vue项目中路由跳转默认采用hash的方式,而hash的变化不会导致浏览器发送请求到服务器;

    将获取数据的的函数的执行放在了Vue生命周期函数 mounted() 中,组件初次加载时执行了 mounted() 函数中的内容,但是再次点击时只有参数变化,组件已经挂载结束而且不会重新加载,mounted()  中的内容当然也就不会重新执行了。

    解决方案:使用侦听器监听URL地址栏参数变化

    当侦听器监听到URL地址栏参数变化时,调用获取数据列表的函数 getDate()

    watch: {

    '$route' (to, from) { <

    展开全文
  • 解决思路:1、子路由组件监听URL变化a、created函数中:created: function () {var self = thisself.fetchData()this.$store.state.count = 0 //在中央状态管理区中添加一个count值来标识是否重新加载,当页面每次...

    解决思路:

    1、子路由组件监听URL变化

    a、created函数中:

    created: function () {

    var self = this

    self.fetchData()

    this.$store.state.count = 0 //在中央状态管理区中添加一个count值来标识是否重新加载,当页面每次加载完后把count值重新设置为0

    },

    b、watch函数中:

    watch: {

    '$route': 'fetchData'

    },

    c、methods函数中:

    methods:{

    fetchData () {

    console.log('路由发生变化...')

    let deptid = typeof (this.$route.query.id) === 'undefined' ? this.$store.state.deptid : this.$route.query.id

    let deptName = typeof (this.$route.query.deptName) === 'undefined' ? this.$store.state.deptName : this.$route.query.deptName

    let company = typeof (this.$store.state.company) === 'undefined' ? this.$route.params.company : this.$store.state.company

    let from = typeof (this.$route.query.from) === 'undefined' ? this.$store.state.from : this.$route.query.from

    let count = this.$store.state.count

    this.deptName = deptName

    this.deptid = deptid

    this.company = company

    this.$http.post('/dept', {

    'pid': deptid,

    'deptName': deptName,

    'company': company

    }).then((data) => {

    this.depts = data.depts

    this.peoples = data.people

    if (from === 'dept' && count === 0) {//请求成功并且count状态为0的时候才从新加载

    this.$store.state.count = 1//发生重新加载的时候要把状态改为1

    this.reload()//调用父组件的刷新路由方法

    }

    })

    },

    }

    d、引入父组件暴露的方法

    export default{

    inject: ['toggleDrawer', 'setMenu', 'reload'],//reload为父组件暴露的方法可调用

    }

    2、父组件写一个方法控制路由跳转刷新

    a、//v-if绑定一个data值

    data () {

    return {

    title: '',

    link: '',

    isRouterAlive: true

    }

    },

    b、提供一个方法来改变data值控制router-view展示与隐藏

    methods:{

    reload () {

    this.isRouterAlive = false

    this.$nextTick(function () {

    this.isRouterAlive = true

    })

    },

    }

    c、将路由刷新方法暴露出去,这样子组件就可以直接调用reload方法了

    export default{

    provide () {

    return {

    toggleDrawer: this.toggleDrawer,

    setMenu: this.setMenu,

    reload: this.reload

    }

    },

    }

    注:页面路由结构 Manager为父组件 Dept为子组件要进行当前页面跳转并刷新数据

    {

    path: '/Manager',

    name: 'manager',

    component: Manager,

    children: [

    {

    path: 'managerindex',

    name: 'managerindex',

    component: ManagerIndex

    },

    {

    path: 'company',

    name: 'company',

    component: Company

    },

    {

    path: 'dept',

    name: 'dept',

    component: Dept

    }

    ]

    }

    展开全文
  • watch: { // 监听地址栏变化 $route(to, from) { console.log(to, from) } }
  • vue监听浏览器返回

    2021-12-06 10:57:17
    监听浏览器的回退按钮,并阻止其默认事件。 1.dom挂载完成后,判断... history.pushState(null, null, document.URL); window.addEventListener('popstate', this.goPageBefore, false); } 2.将监听操作写在metho.
  • 前言: 在网上看了很多方法有说location.reload方法刷新的,也有说用自定义*...当路由或者地址参数变化后需要更新数据,通过监听的方法监听地址或参数变化后重新获取数据,新的数据更新上去了,但是旧的数据也还在。
  • vue监听返回键

    2021-05-19 14:29:30
    否则其他vue路由页面也会被监听 destroyed(){ window.removeEventListener('popstate', this.fun, false);//false阻止默认事件 }, 3、将监听操作写在methods里面,removeEventListener取消监听内容必须跟开启监听...
  • 【转】Linux学习之路--启动VNC服务我的Linux是Fedora 13,安装方法如下: 1.打开终端,执行 # yum install -y tigervnc tigervnc-server 2.编辑/etc/sysconfi/vncs ...Android NDK之JNI陷阱背景: 最近一个月一直在做...
  • Vue项目实战】之WebSocket消息监听

    千次阅读 热门讨论 2021-04-20 15:53:55
    Vue实战笔记前言项目场景:WebSocket.jsgetSocketData问题描述:原因分析:解决方案: 前言 哈喽!CSDN! 很久以前有位好朋友就建议来CSDN做一些笔记,直到最近又被提醒了一次,这次终于想起来了,好习惯还是需要一...
  • vue2中使用watch API 一样在setup函数中监听即可(vue3记得导入watch函数哦) setup() { const article = reactive({...}); function fetchArticle(id) { //assign article.. } watch('$route.params....
  • vue项目监听物理返回

    2021-01-21 11:36:30
    监听物理移动端物理返回以方便添加其他操作: 直接上代码: mounted () { // 如果支持 popstate 一般移动端都支持了 if (window.history && window.history.pushState) { // 往历史记录里面添加一条新...
  • 有的时候我们可能有这样的需求,比如现在url为m.taoyuewenhua.com/#/ 我们需要在用户每次跳转路由的时候监控有没有abc这个参数. 如果有,后端要求我们在以后跳转...因为vue中有很多组件.在每个组件都写的话,太麻烦....
  • 1.vue 监听网页关闭/浏览器关闭事件 <script> export default { name: 'App', mounted(){ //添加监听事件 window.addEventListener('beforeunload', e => this.beforeunloadHandler(e)) }, methods:...
  • Vue+Element,公司看板的使用人大多利用谷歌浏览器查看。。 前端请求权限流程:用户登陆后会把用户的信息加密处理放进cookies,,然后会用vue的拦截器,,拦截要发送的请求,,并且在每个请求的headers里面带上...
  • 首先,页面初始化mounted的时候,通过document.body.clientWidth和document.body.clientHeight来获取到浏览器的宽和高,然后通过window.onresize来监听浏览器窗口的变化,在这里来改变我们的变量宽和高即可。...
  • vue怎么修改添加服务器地址 内容精选换一换本章节指导用户为Windows系统的ECS主机添加域名解析并添加安全组,防止下载Agent安装包与采集监控数据时出现异常。修改ECS的DNS配置有两种方式:Windows图形化界面和管理...
  • vue项目配置后端服务器地址

    千次阅读 2021-08-10 09:00:22
    vue项目配置后端服务器地址 内容精选换一换查询负载均衡器状态树。可通过该接口查询负载均衡器关联的监听器、后端云服务器组、后端云服务器、健康检查、转发策略、转发规则的主要信息,了解负载均衡器下资源的拓扑...
  • 参考:vue 实现登录键盘enter事件这篇的方法 我的html按钮:登录css样式:/* 登陆按钮input方法,就用不到这个表单 */.denglu{background-image: url(../../../assets/images/img/00_log_in/login_button_login_...
  • mounted() {this.haveSeek = false//先判断是否是复制的 url 进入到播放页面if (!this.$route.params.Ids && !this.$route.params.fileId) {this.$message({message:'暂未获取到视频信息,请从列表页重新...
  • keyword:ts、路由监听、router、beforeRouterEnter、beforeRouterLeave在js中需要监听路由的变化时,我们可以通过全局路由守卫、组件内的beforeRouterEnter、beforeRouterLeaver等来监听路由的变化。那么当我们在ts...
  • vue获取服务器地址

    2021-08-12 07:52:34
    vue获取服务器地址 内容精选换一换GB28181类型设备在接入VIS时,需要配置VIS对外提供的SIP服务器地址、端口。SIP服务器地址和端口可以在VIS控制台获取,如图1所示。无法正常使用Cloud-init。弹性云服务器获取...
  • vue3.x中使用router和vue2 不一样了 在vue2中使用方法: this.$router.push() this.$route.parma
  • 用户登录的话,只要登录时向后端发送请求即可 2、监听浏览器的关闭事件代码应放在项目的入口文件中,如果放在其他vue文件中,监听事件可能不会全局生效,所以默认写在app.vue文件中 3、differTime是用来区分浏览器...
  • vue做的项目,有个需求就是关闭浏览器的时候,需要往后台提交有个接口,来监听这个账号有没有下线。网上找了很多种方法,一直没有实现。主要困惑点:1、浏览器关闭是事件,是什么onbeforeunload、onunload 又是...
  • vue 项目只要不是静态页面,一般都会和官方的路由...因为 vue 在页面上显示哪个组件是根据 vue-router 进行控制的,在地址栏上直接输入路由名称,并不能触发 vue-router 的规则,所以只能通过监听地址的改变,利用回...
  • 今天在实现一个小功能的时候,遇到一个问题,使用vue-router获取上一页面的url信息,我尝试了多种方式,发现使用vue-router的canDeactivate钩子实现这个功能最为方便,现在将我的实现代码总结如下:项目使用的是vue-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,172
精华内容 11,268
关键字:

url地址监听vue

vue 订阅