精华内容
下载资源
问答
  • vue监听url变化清空vuex中的数据

    千次阅读 2019-01-05 13:54:13
    created() { if (sessionStorage.getItem('store')) { this.$store.replaceState({ ...this.$store.state, ...JSON.parse(sessionStorage.getItem('store')) }) } windo...
       created() {
         if (sessionStorage.getItem('store')) {
           this.$store.replaceState({ ...this.$store.state, 
           ...JSON.parse(sessionStorage.getItem('store')) 
           })
         }
    
         window.addEventListener('beforeunload', () => {
           sessionStorage.setItem('store', JSON.stringify(this.$store.state))
         })
       },

     

    展开全文
  • Vue 监听URL地址栏变化

    千次阅读 2020-11-04 11:35:44
    使用 watch watch: { $route(to, from){ // todo } }

    使用 watch

    watch: {
    	$route(to, from){
    		// todo
    	}
    }
    
    展开全文
  • **A.页面传递参数** Clickcity(){ ... url:12 }}) }, **B.页面监听接收参数** watch: { // 监听到路由地址的改变 $route:{ immediate:true, handler(){ if(this.$route.query.url){ console.log(1212)
    **A.页面传递参数**
     Clickcity(){
            this.$router.push({path:'/City',query:{
             url:12
           }})
          },
     **B.页面监听接收参数**
     watch: {
    // 监听到路由地址的改变
      $route:{
       immediate:true,
        handler(){
         if(this.$route.query.url){
            console.log(1212)
           }
         }
      }
    }
    
    展开全文
  • 52. Vue使用watch监听网页的URL变化

    千次阅读 2020-08-05 23:12:48
    这种业务使用事件监听都可以处理,但是如果需要监听网页的URL地址变化,这样事件监听肯定是做不了的。那么此时就可以使用watch来实现了。 那么这个实现的思路该怎么处理呢? 这时候可以监听路由的对象this.$route....

    需求

    上一篇章使用watch组件通过监听文本框的参数变化,实现了名称拼接的案例。这种业务使用事件监听都可以处理,但是如果需要监听网页的URL地址变化,这样事件监听肯定是做不了的。那么此时就可以使用watch来实现了。

    那么这个实现的思路该怎么处理呢?

    这时候可以监听路由的对象this.$route.path变化来处理。

    示例

    1.首页编写路由映射登录以及注册两个组件

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <!-- 导入vue.js库  -->
            <script src="lib/vue.js"></script>
            <!-- 导入vue-router -->
            <script src="lib/vue-router.js"></script>
            <style>
                .router-link-active,.myactive{
                    color: #0056B3;
                    font-weight: 700;
                    text-decoration: none;
                }
                
                /* 设置动画效果 */
                .v-enter,.v-leave-to{
                    opacity: 0;
                    transform: translateX(9.375rem);
                }
                
                .v-enter-active, .v-leave-active{
                    transition: all 1s ease;
                }
            </style>
        </head>
        <body>
    
            <div id="app">
                
                <router-link to="/login?id=10&name=lisi&age=33" tag="span">登陆</router-link>
                <router-link to="/register/10/zhangsan/55">注册</router-link>
                
                <!-- 路由出口 -->
                <!-- 路由匹配到的组件将渲染在这里 -->
                <transition mode="out-in">
                    <router-view></router-view>
                </transition>
                
            </div>
    
            <script>        
                
                // 1. 定义 (路由) 组件。
                
                // 创建登陆组件login
                var login = {
                    template: "<h3>登陆组件, id:{{$route.query.id}}, name:{{$route.query.name}}, age:{{$route.query.age}}</h3>",
                    created(){
                        console.log(this.$route);
                        console.log(this.$route.query.id);
                        console.log(this.$route.query.name);
                        console.log(this.$route.query.age);
                    }
                }
                
                // 创建注册组件register
                var register = {
                    template: "<h3>注册组件,id:{{$route.params.id}}, name:{{$route.params.name}}, age:{{$route.params.age}}</h3>",
                }
                
                // 2. 定义路由
                var routes = [
                  { path: '/', redirect: '/login' },
                  { path: '/login', component: login },
                  { path: '/register/:id/:name/:age', component: register }
                ]
                
                // 3. 创建 router 实例,然后传 `routes` 配置
                var router = new VueRouter({
                  routes, // (缩写) 相当于 routes: routes
                  linkActiveClass: "myactive", // 自定义选中的class
                })
                
                // 创建vue的实例
                var vm = new Vue({
                    el: '#app',
                    data: {},
                    methods:{},             
                    // 注册局部组件,注意:下面使用vue-router的话,不需要在这里注册组件
                    components:{},
                    // 将路由规则对象,注册到 vm 实例上,用来监听 URL 地址的变化,然后展示对应的组件
                    router,  // 等价于 router: router
                })
                
            </script>
    
        </body>
    </html>

    2.浏览器查看效果

    image-20200301202218874
    image-20200301202245868

    可以看到已经实现了点击组件的切换了,那么下面来监听路由this.$route.path的变化。

    image-20200301202401276
    image-20200301202418451

    3.使用watch监听$this.route.path路径变化,根据不同的路由,打印不同的信息

    image-20200301204705140
    watch: {
                        // 监听路由变化
                        "$route.path": function(newVal, oldVal) {
                            console.log(`new_path = ${newVal}, old_path = ${oldVal}`);
                        }
                    }

    首先在浏览器查看一下打印的路径信息,如下:

    image-20200301204811287

    根据上面打印出来的路径,那么我只要做个if判断可以设置不同的路径打印不同的信息了,如下:

    image-20200301205039136

    那么在浏览器显示打印的信息如下:

    image-20200301205103914
    image-20200301205119862

    那么从效果来看,已经可以根据不同的路径打印对应的信息内容了。

    更多精彩原创Devops文章,快来关注我的公众号:【Devops社群】 吧:

    image
    image
    展开全文
  • 转载自: Heap Stack(Pingbook) https://pingbook.top/vue-watch-current-url-route-change/ 转载于:https://www.cnblogs.com/alterhu/p/11574485.html
  • 内嵌项目中对路由变化进行全局监听,当路由发生变化时,将变化后的url传到主页面 关键点: 路由变化的全局监听 代码 Vue全局监听路由变化 //监听 watch:{ //路由发生变化调用 $route(to,from){ console.log(...
  • 我是Kaiqisan,是一个不善言辞的羞射男孩,之前尝试在vue监听路由变化,发现在vue中无法使用window.location来监听,于是另外找了一种方法。 这个检测不会去检测域名,端口,协议的变化,只会检测端口后面的内容的...
  • 移动端监听当前url地址栏的变化 vue

    千次阅读 2018-11-02 17:49:21
    项目中只需要改变url后面的id 需要改变当前页的数据, 把页面请求数据的函数封装起来,在mounted里调用 ... // 监听路由参数发生变化,重新加载页面 "$route": "getNews" }    ...
  • 这段时间在用Vue做一个项目时,...最开始我是在按钮上设置了如果用户是没有登录的状态,就不执行跳转行为,但我在浏览器的URL地址栏中输入要跳转的页面地址时,就能跳转过去,没有被阻拦,最后我用了Vue中的 $route...
  • 需求:监听 addForm 对象中 protocolBm 的变化 addForm: { name:'', url:'', protocolBm:''//协议 }, 方案一:(直接监听,推荐) watch:{ 'addForm.protocolBm':{ handler: function(val, oldVal) { //动作...
  • vue 中怎么监听路由的变化

    千次阅读 2019-01-24 11:27:49
    1、在一个组件里面 mounted(){ // 判断浏览器是否支持history if (window.history &amp;amp;amp;&amp;amp;... window.history.pushState) { console.log(document.URL) history.pushState(null, nul...
  • VUE中如何监听对象的属性变化

    千次阅读 2019-05-08 10:39:18
    需要做两个选择器的级联操作,根据当前阶段显示不同的当前状态,我的第一思路是用到VUE的计算属性computed computed:{ statusOptions:function () { let me = this; let stage = project.currentStage; let ...
  • 最近在做项目的时候要对页面进行过滤,由于一些原因不适合在vue的router中进行监听操作,故用到了 window.location 对象. 在控制台输入 window.location 回车后,能看到当前页面的 window.location 对象的一些信息...
  • Vue路由参数变化,页面不刷新

    千次阅读 2019-04-15 09:39:10
    一、现象 下面两个页面的截图,URL参数不一样,页面切换时,内容却没有刷新。 二、解决方案 监听路由变化,控制app的刷新
  • 文章目录问题描述解决思路在匹配的URL组件中处理逻辑在App.vue监听路由的变化 问题描述 在工作中遇到一个需求:App.vue 有个左侧菜单组件和右侧路由组件,现在需要根据不同的URL,决定是否显示左侧菜单 解决思路 ...
  • vue-router原理

    2020-10-29 22:19:58
    如何监听url变化 vue插件使用,以及Vue.use(VueRouter)做了什么 url变化如何通知组件更新 如何监听url变化 首先我们要知道前端路由,前端路由、后端路由都是一种相对概念,就是为了区分而起了个名字,就好比...
  • 3.这种映射是单向的,即 URL 变化引起 UI 更新(无需刷新页面) SPA:单页面应用程序 在Vue.js框架下,要依赖一个叫做Vue-router.js的包 hash: 1. hash 是 URL 中 hash (#) 及后面的那部分,常用作锚点在页面内...
  • vue路由

    2019-08-23 17:24:53
    2019年8月23日 vue路由的基本使用 首先引入vue的包,再引入vue-router...将路由规则对象注册到vm实例上,用来监听URL地址的变化,然后展示相应的组件 var vm = new Vue({ el: '#app', data: { }, methods: {}, ...
  • 或者query,但是即使我们修改了参数,URL也显示已经改变,但页面并不会刷新,因为路由是相同的,vue就会认为你是同一个页面,从而复用已加载的页面,而不会重新加载,可以通过watch监听事件来监听路由的变化: ...
  • Vue面试题

    2021-04-23 20:42:45
    Hash模式会在请求的URL后拼接#,当 # 后面的哈希值发生变化时,可以通过 hashchange 事件来监听URL变化,从而进行跳转页面,并且无论哈希值如何变化,服务端接收到的 URL 请求永远是不包含#的URL。使用window....
  • vue路由入门

    2019-04-19 11:31:21
    监听url变化,在变化前后执行响应的逻辑。 使用的步骤:①提供路由配置表,不同url匹配不同的组件配置 ②初始化路由实例 new VueRouter() ③挂载到Vue实例上 ④提供路由占位,用来挂载URL匹配到的组件 配...
  • Vue基础知识点全集

    2021-05-14 17:34:31
    Vue知识点文章目录Vue.js简介Vue基础语法、Vue 模板语法Vue 条件语句Vue 循环语句Vue 计算属性 computedVue 监听属性:通过 watch 来响应数据的变化Vue 样式绑定Vue 事件处理器利用 v-model 实现数据的双向绑定Vue...
  • vue-router原理理解

    2020-03-25 20:57:58
    如何监听url变化2.如何劫持router组件的current变量2.1.Vue.use的用法2.2.mixin混入2.3.defineProperty劫持3.如何渲染 流程图 首先看一张工作流程图 1.url变化2.触发url监听事件3.改变router中的current变量4.劫持...
  • Vue-Router基础

    2019-05-30 14:13:18
    通过监听URL变化,定位到同一文件的不同组件 类型 Hash模式 (不美观/无法定位锚点) History模式(需要后端配合/IE9不兼容(使用强制刷新处理)) 安装 npm install vue-router import VueRouter ...
  • Vue 前端路由 vue-router

    2017-12-21 16:43:00
    前端可以监听url变化;前端可以解析url并执行相应操作。 前后端分离:后端只提供API来返回数据,前端通过ajax获取数据后,在通过一定的方式渲染到页面上。 SPA:前后端分离+前端路由。 SPA只有一个html文件,...
  • vue之配置属性

    2020-10-01 14:48:15
    目录Vue配置属性vue配置属性之elvue配置属性之datavue配置属性之methodsVue配置属性之watch使用watch属性监听 firstname + lastname = fullnamewatch监听url路径的变化Vue配置属性之computedcomputed 之 数组的翻转...
  • 总结: 路由其实说的就是路径。 中后台都在使用vue-router。...监听URL变化,并在变化前后执行相应的逻辑。 不同的URL对应不同的组件。 提供多种方式改变URL的API(URL的改变并不能导致页面的更新)。 ...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 135
精华内容 54
关键字:

vue监听url变化

vue 订阅