精华内容
下载资源
问答
  • Vue 监听URL地址栏变化

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

    使用 watch

    watch: {
    	$route(to, from){
    		// todo
    	}
    }
    
    展开全文
  • 移动端监听当前url地址栏的变化 vue

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

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

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

    然后router-link跳转

    在watch里再次调用函数就好

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

     

     

    展开全文
  • **A.页面传递参数** Clickcity(){ this.$router.push({path:'/City',query:{ ...// 监听到路由地址的改变 $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组件中处理逻辑在App.vue监听路由的变化 问题描述 在工作中遇到一个需求:App.vue 有个左侧菜单组件和右侧路由组件,现在需要根据不同的URL,决定是否显示左侧菜单 解决思路 ...
  • vue的app监听返回键

    千次阅读 2019-04-11 17:31:33
    document.addEventListener('plusready', function (a) { var first = ''; plus.key.addEventListener('backbutton', function () { //获取地址栏目中的url var urls = location.hash.split('/')[1] ...
  • 后端路由:对于普通的网站,所有的超链接都是url地址,所有url都对应服务器上对应的资源 前端路由:对于单页面应用程序来说,主要通过url的hash(#)来实现不同页面的切换,同时hash还有一个特点HTTP请求中不会包含...
  • 这段时间在用Vue做一个项目时,...最开始我是在按钮上设置了如果用户是没有登录的状态,就不执行跳转行为,但我在浏览器的URL地址栏中输入要跳转的页面地址时,就能跳转过去,没有被阻拦,最后我用了Vue中的 $route...
  • URl中#后的内容作为路径地址 监听hashchange事件 根据当前路由地址找到对应的组件重新渲染 History模式 通过history.pushState()方法改变地址监听popstate事件 根据当前路由地址找到对应组件重新渲染 Vue ...
  • vue路由

    2019-08-23 17:24:53
    2019年8月23日 vue路由的基本使用 首先引入vue的包,再引入vue-router...将路由规则对象注册到vm实例上,用来监听URL地址的变化,然后展示相应的组件 var vm = new Vue({ el: '#app', data: { }, methods: {}, ...
  • URL中#后面的内容作为路径地址 监听HashChange事件 根据当前路由地址找到对应的组件重新渲染 History模式 通过history.pushState()方法改变地址监听popstate 事件 根据当前路由地址找到对应组件重新渲染 手写...
  • ·URL中#后面的内容作为路径地址,当地址改变的时候不会向服务器发送请求,但是会触发hashchange事件。 监听hashchange事件,在该事件中记录当前的路由地址,然后根据路由地址找到对应组件。 根据当前路由地址找到...
  • 本项目采用的是Vue.js做前端页面展示,大家完全可以换成自己别的喜欢的,React、Angular等等,每个框架都有可取的地方,这里不多说下面扯到正题上## 预览在线预览地址: https://microzz.com/vue-chat/![Vue.js+...
  • Vue(路由)

    2019-11-19 17:00:47
    1.后端路由 对于一个普通的网站 所有的超链接都是一个URL地址 所有的URL地址都指向服务器上的某个资源 2.前端路由 对于单页面应用程序 通过URL中的hash(#)来实现不同页面的切换 通过#号改变切换页面的方式 我们称为...
  • 手动实现vue-router

    2021-03-15 23:16:46
    URL中#(HashTAG)后面的内容是路径地址 监听hashchange事件 根据当前路由地址找到对应组件并重新渲染 History 模式 通过history.pushState()方法改变地址栏(这一操作只改变地址栏并记录历史,并不真正跳转) ...
  • url地址外观 http://localhost:8081/#/about http://localhost:8080/about 原理 基于锚点,监听锚点变化时触发的onhashchange事件 基于HTML5的 history.pushState()方法,该方法会向浏览器历史记录...
  • Vue Router

    2020-12-13 17:00:36
    后端路由:根据不同的URL地址分发不同的资源 前端路由:根据不同的用户事件,显示不同的页面内容(负责事件监听,触发事件后,通过事件函数渲染不同内容) 多页面应用模式MPA(Multi Page Application) 单页面...
  • vue-router原理

    2020-12-03 09:50:42
    说简单点,vue-router的原理就是监听URL地址变化,从而渲染不同的组件。 vue-router的模式主要有hash模式和history模式。 1.hash模式的原理(url带有#号部分): 在vue-router.js的2.8版本之前,在路由的hash部分...
  • 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源。 那么url地址和真实的资源之间就有一种对应的关系,就是路由。 路由分为前端路由和后端...
  • 请求地址(Server的接口地址,该处必须在双引号中将url地址用单引号包住,因为需要直接返回字符串路径时,就必须采用单引号把 字符串内容括起来,如BASE_URL:"'http://192.168.1.111:4000/api'"),在url后加端口号...
  • // 服务端接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!) serverUrl: '//ueditor.szcloudplus.com/cos', }; }, }; 至此你已经可以在页面中看到一个初始化之后的...
  • 使用hash模式时,URL地址请求中会带有#号,此模式背后的原理是onHashChange事件,可以在window对象中上监听该事件,同时hash发生变化的URl会被记录下来,从而使浏览器的前进后退都可以使用,这样页面的状态和URL...
  • 图片地址(photo url) high-url String 更清晰的图片,若不提供会采用 url(more detailed photo url) scale Number 2 放大倍数(scale number) disabled Boolean false 禁用 width Number 166 内部放大区域...
  • vue语法.rar

    2019-08-16 11:03:43
    通过url路径来实现的,哪个url对应哪个页面,在vue中是通过vue-router来实现 Vue-router在vue2.0中的使用、 配合vue1.0使用的版本的帮助文档地址: https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn ...
  • vue数据双向绑定的实现原理是采用数据劫持结合发布者-订阅者...一般来讲,给图片src配置一个假的地址,同事给添加一个data-url属性指向真是url地址,当图片快要显示的时候将url地址替换成data-url的属性。vue中watc...
  • 在线体验CAOMAGE​www.caomage.com一、原理URL地址栏中玩:使用window.location.hash动态修改页面的hash值 标签页中玩:使用document.title动态修改页面的title 使用一个定时器,产生方块下落的效果,监听键盘按键...
  • 模拟实现vue-router

    2020-12-14 17:35:44
    hash模式是把url中#后面的内容作为路由地址,可以直接通过location.url来切换浏览器中的地址,如果只改变了路径中#后面的内容,浏览器不会向服务器发送请求,但是会把这个地址记录到浏览器访问历史中。 当hash改变后...

空空如也

空空如也

1 2 3 4
收藏数 77
精华内容 30
关键字:

url地址监听vue

vue 订阅