精华内容
下载资源
问答
  • 解决思路: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

    }

    ]

    }

    展开全文
  • 转载自: Heap Stack(Pingbook) https://pingbook.top/vue-watch-current-url-route-change/ 转载于:https://www.cnblogs.com/alterhu/p/11574485.html

    转载自: Heap Stack(Pingbook) https://pingbook.top/vue-watch-current-url-route-change/

    转载于:https://www.cnblogs.com/alterhu/p/11574485.html

    展开全文
  • 移动端监听当前url地址栏的变化 vue

    千次阅读 2018-11-02 17:49:21
    项目中只需要改变url后面的id 需要改变当前页的数据, 把页面请求数据的函数封装起来,在mounted里调用 然后router-link跳转 在watch里再次调用函数就好 watch: { // 监听路由参数发生变化,重新加载页面 &...

    项目中只需要改变url后面的id  需要改变当前页的数据,

    把页面请求数据的函数封装起来,在mounted里调用

    然后router-link跳转

    在watch里再次调用函数就好

    watch: {
      // 监听路由参数发生变化,重新加载页面
      "$route": "getNews"
    }

     

     

    展开全文
  • 最近在做项目的时候要对页面进行过滤,由于一些原因不适合在vue的router中进行监听操作,故用到了 window.location 对象. 在控制台输入 window.location 回车后,能看到当前页面的 window.location 对象的一些信息...

    最近在做项目的时候要对页面进行过滤,由于一些原因不适合在vue的router中进行监听操作,故用到了 window.location 对象.

    在控制台输入 window.location 回车后,能看到当前页面的 window.location 对象的一些信息:
    在这里插入图片描述

    下面代码中 cubeTitleLeftClick () 是项目里的一个按钮的监听事件,返回的参数值 return 'disableWebviewGoBack' 是该监听事件要求返回的参数值,而 testLogout()、testTitleLeftClick()方法只是在过滤到一定条件的页面,而进行的相应的方法调用,从而达到不同的功能效果而已。

    以上这些在看代码的时候,可以不那么关注,重点关注如何获取 本页面的 hash,和截取部分hash的方法。

    function cubeTitleLeftClick () { // 修改原生头部返回事件
          let pageHash = window.location.hash
          var bPos = pageHash.indexOf('/')
          bPos = pageHash.indexOf('/', bPos + 1)
          if(bPos!==-1){
            pageHash = pageHash.substr(0,bPos  + 1)
          }
          console.log('pageHash', pageHash)
          if(pageHash==='#/'){
            testLogout()
          }else if(pageHash==='#/mobileApprove/'){
            testLogout()
            testTitleLeftClick()
            return 'disableWebviewGoBack'
          }
        }
    

    监听 页面 hash的变化 用到了 onhashchange 事件,在菜鸟教程中是这样介绍的:
    在这里插入图片描述
    下面代码用了上图的最后一种语法写法,并且写在了 vue项目中的 public文件夹下的 index.html 中,进行全局监听。

    window.addEventListener("hashchange",function (e) {
              console.log('e', e)
              console.log('e.newURL', e.newURL)
              console.log('e.oldURL', e.oldURL)
        },false);
    

    后面发现也可以写在 vue项目中的 App.vue 中进行全局监听,代码如下:

      created  () {
        window.addEventListener('hashchange', (e) => {
          console.log('e', e)
          console.log('e.newURL', e.newURL)
          console.log('e.oldURL', e.oldURL)
        }, false)
      }
    
    展开全文
  • VUE中如何监听对象的属性变化

    千次阅读 2019-05-08 10:39:18
    需要做两个选择器的级联操作,根据当前阶段显示不同的当前状态,我的第一思路是用到VUE的计算属性computed computed:{ statusOptions:function () { let me = this; let stage = project.currentStage; let ...
  • 随手记-不定期更新

    2018-09-27 10:21:55
    求数组元素最大值及其下标 var arr = [3,6,-7,6,4,1]; console.log(Math.max.apply(null,arr));// 最大值 console.log(arr.indexOf(Math.max.apply(null,...vue监听当前URL变化 mounted() { const _this = this;...
  • vue-router原理

    2020-12-03 09:50:42
    说简单点,vue-router的原理就是监听URL地址变化,从而渲染不同的组件。 vue-router的模式主要有hash模式和history模式。 1.hash模式的原理(url带有#号部分): 在vue-router.js的2.8版本之前,在路由的hash部分...
  • 基于锚点,监听锚点变化时触发的onhashchange事件 基于HTML5的 history.pushState()方法,该方法会向浏览器历史记录中加入一条数据,会改变当前地址栏的地址,但不去加载新地址 兼容性 对于IE,IE10...
  • 锚点的页面是在mounted里调用的定位到锚点位置,只有新打开此页面时才会执行mounted,所以当前页面内进行点击定位到锚点位置不起作用,解决方法在main.js里的watch里一直监听着URL是否发生变化,如果URL变化就执行...
  • v-model 的实现依赖对编辑器内容变化监听,组件提供了两种可选的监听方式,但是不建议修改,除非你知道自己在干什么。 listener 模式借助 UEditor 的 contentChange 事件,优点在于依赖官方提供的事件 API,无需...
  • 模拟实现vue-router

    2020-12-14 17:35:44
    当hash改变后,我们需要监听hash的变化做相应处理,只需要监听hashchange事件。当hash改变后就会触发hashchange事件,在hashchange事件中,我们记录当前的路由地址,并找到该路径对应的组件,重新渲染。 history模式...
  • 3-1-4-Vue Router实现原理

    2020-07-04 13:19:19
    Vue Router 实现原理 前置知识 插件 混入 Vue.observable() 插槽 render 函数 运行时和完整版的 Vue Vue Router 是前端路由,当路径切换的时候在浏览器端判断当前路径,并加载当前路径对应...需要监听 hash 的变化
  • vue页面内部定位到锚点位置

    千次阅读 2019-11-20 16:29:36
    锚点的页面是在mounted里调用的定位到锚点位置,只有新打开此页面时才会执行mounted,所以当前页面内进行点击定位到锚点位置不起作用,解决方法在main.js里的watch里一直监听着URL是否发生变化,如果URL变化就执行...
  • 本质是使用window.onhashchange来监听url变化(本质是#后边内容的变化),并根据url的不同加载相应内容 二、history模式 url不含#,比较优雅 本质是使用H5引入的window.history那一套东西来实现 (1)length: ...
  • 运用到了watch监听url变化; watch是一个对象,监听的数据一旦发生改变便会立即触发。 此代码结合Element-UI导航菜单 代码如下: data() { return { activeIndex: this.$route.path, } }, watch: { '$...
  • 实现前端路由的技术 1、利用H5中的history API 实现 ...我们在URL中常看到#,这个符号,而“#”这个符号有两种情况,一个是我们所谓的锚点,但是路由里的锚点不叫锚点,我们称之为hash,它主要利用监听hash 值的变化
  • 根据hashchange来监听页面的路由变化,截取当前页面url里面的#后面的参数,根据参数来执行对应的功能函数 <li><a href="#/">turn yellow</a></li> <li><a href="#/blue">turn ...
  • vue中使用$this.router.push()方法,如果只是传入的参数不同,会出现url地址变化了,但是页面没有重新请求数据,需要刷新一下页面才有新的数据加载。 解决方式 方式1:监听路由的变化 在页面的watch中,监听$...
  • true, // 根据当前路由变化自定义进行判断是否激活微应用 container: 'icestarkNode', // 微应用挂载节点 url: ['//icestark.com/index.js', '//icestark.com/index.css'], // 微应用 ...
  • 而在Js中恰恰还有事件 <code>window.onhashchange</code> 能监听到 <code>fragment</code> 的变化,于是就利用这个原理来达到一个修改局部内容的操作。 <p><code>#fragment</code> 部分就是对应到Js中的 ...
  • 把需要用到的数据存放在vuex中,在app.vue的updateBySocket()函数中整体监听服务端emit的事件,根据路由信息判断数据是要做一般处理还是交给对话框页面进行处理 核心代码 服务端(express实现) let serve = app....

空空如也

空空如也

1 2
收藏数 22
精华内容 8
关键字:

vue监听当前url变化

vue 订阅