精华内容
下载资源
问答
  • 文章目录一、监听路有变化二、vue实现页面刷新三、示例 一、监听路有变化 监听路有变化 二、vue实现页面刷新 vue实现页面刷新 三、示例 监听页面刷新 watch:{ $route:{ handler(val,oldval){ // console.log(val...

    一、监听路有变化

    监听路有变化

    二、vue实现页面刷新

    vue实现页面刷新

    三、示例

    监听页面刷新

     watch:{
        $route:{
          handler(val,oldval){
            // console.log(val);//新路由信息
            // console.log(oldval);//老路由信息
             this.id = this.$route.query.id
            this.$router.go(0)//页面刷新
          },
          // 深度观察监听
          deep: true
        }
       }
    
    展开全文
  • vue通过路由实现页面刷新的方法

    千次阅读 2020-12-20 10:46:01
    vue 开发微信商城项目,需求如下:购物车页面跳转到详情页,购物车页面包含了多个组件,点击结算跳转到订单页面,从订单返回时,购物车页面没有刷新,由于购物车组件之间通过bus实现事件传递,页面跳转(非物理返回)...

    vue 开发微信商城项目,

    需求如下:

    购物车页面跳转到详情页,购物车页面包含了多个组件,点击结算跳转到订单页面,从订单返回时,购物车页面没有刷新,由于购物车组件之间通过bus实现事件传递,页面跳转(非物理返回)无法触发beforeDestroy方法,则无法再此方法中销毁bus方法

    beforeDestroy() {

    this.$root.Bus.$off('judge')

    this.$root.Bus.$off('refreshDetail')

    this.$root.Bus.$off('clearAll')

    this.$root.Bus.$off('upDataCart')

    },

    无奈,通过beforeRouteLeave来销毁

    beforeRouteLeave(to, from, next) {

    this.$root.Bus.$off('judge')

    this.$root.Bus.$off('refreshDetail')

    this.$root.Bus.$off('clearAll')

    this.$root.Bus.$off('upDataCart')

    next()

    },

    同样的,物理返回时无法触发购物车的created方法,则无法触发bus的$on方法

    归根结底,物理返回时刷新页面则可以处理此问题

    思路一

    beforeRouteEnter(to, from, next) {

    next(()=>{

    window.location.reload()

    })

    },

    此方法理论貌似可行,但是页面会狂刷不止,

    最后采用了思路二,貌似是一个很low的方法,但是解决了实际问题

    this.$router.replace({ name: 'cart' })// 处理返回刷新问题

    this.$router.push({

    path: '/order/order_sure',

    query: {

    sku: sku_str,

    cart: 'cart'

    }

    })

    页面跳转前先通过路由replace到当前页,再跳转到订单页面,返回可以自动刷新了,这个方法并不理想,如果您有更好的方法,欢迎分享

    有专门的方法处理此问题,在购物车页面,添加如下代码即可

    // 销毁组件,返回刷新

    deactivated() {

    this.$destroy()

    },

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    展开全文
  • Vue.js 路由可以通过不同的 URL 访问不同的内容,实现多视图的单页 Web 应用1、通过 实现组件用于设置一个导航链接,切换不同 HTML 内容使用方法:简单写法demo2使用 v-bind 的写法demo2demo2传参的写法demo2这里...

    Vue.js 路由可以通过不同的 URL 访问不同的内容,实现多视图的单页 Web 应用

    1、通过  实现

     组件用于设置一个导航链接,切换不同 HTML 内容

    使用方法:

    简单写法

    demo2

    使用 v-bind 的写法

    demo2

    demo2

    传参的写法

    demo2

    这里传参需要在 router.js 中对 demo2 的路径进行配置,在 path 中 demo2 后添加通配符 : 和对应的 userId,如下:

    {

    path: '/demo2/:userId',

    name: 'demo2',

    component: demo2

    },

    配置完成后,页面跳转的结果就为 /demo2/123

    这里的“123”就是上面的 userId

    那么,如何在新页面中获取到传过来的参数 userId 呢?

    在 mounted 钩子中使用 this.$route.params.xx. 获取传过来的参数,如下:

    mounted () {

    alert(this.$route.params.userId)

    }

    // 弹出123

    传入地址键值对

    demo2

    页面跳转的结果为 /demo2?plan=private

    (注意这里不用在 router.js 里配置路径)

    在新页面中获取到传过来的地址键值对 plan,可以在 mounted 钩子中使用 this.$route.plan.xx. 获取传过来的地址键值对,如下:

    mounted () {

    alert(this.$route.query.plan)

    }

    // 弹出private

    2、通过 JS 实现

    template 部分:

    跳转页面

    script 部分:

    (注意这里是 router,上面是 route)

    简单写法

    methods:{

    toURL(){

    this.$router.push({ path: '/demo2' })

    }

    }

    传参的写法

    methods:{

    toURL(){

    this.$router.push({ name: 'demo2', params: { userId: }})

    }

    }

    传入地址键值对

    methods:{

    toURL(){

    this.$router.push({ name: 'demo2', params: { userId: }, query: { plan: 'private' } })

    }

    }

    js实现页面跳转的两种方式

    CreateTime--2017年8月24日08:13:52Author:Marydon js实现页面跳转的两种方式 方式一: window.location.href = url 说明:我们常用 ...

    vue 路由传参 params 与 query两种方式的区别

    初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了:  router文件下index.js里面,是这么定义路由的: { p ...

    Servlet页面跳转的两种方式

    一.页面跳转 1. 请求转发: (1) 使用requestDispatcher对象: 转发格式:request.getRequestDispatcher("path").forwa ...

    web项目中实现页面跳转的两种方式

    跳转在网页本身,URL不改变

    vue 页面跳转的两种方式

    1,标签跳转     点我到第二个页面 2,点 ...

    web页面跳转的几种方式

    可用客户端触发或服务端触发的方式来实现页面跳转. 客户端触发 方式一:使用Javascript 利用window.location对象的href属性.assign()方法或replace()方法来实现 ...

    实现网页页面跳转的几种方法(meta标签、js实现、php实现)

    1.meta标签实现 只需在head里加上下面这一句就行了,在当前页面停留0.1秒后跳转到目标页面  代码如下 复制代码 1

    展开全文
  • 由于三个菜单虽然路由不同但是页面是同一个页面 .切换菜单的时候并不会再出触发vue的钩子函数 .然后三个list页面查询的数据相同.也就是不会触发查询方法.导致不能切换条件. 然后网上搜了一下 watch监听时间. 发现...

    highlight: a11y-dark

    theme: smartblue

    场景分析

    在系统中一个模块有三个子模块. 业务数据中可以直接根据类型去区分这个三个子模块的归属. 通常情况下.我们是写在同一个模块中然后去选择业务类型. 但是业主要求,将这个拆分成三个菜单.用户根据自己的需求去选择需要使用的模块.

    image.png

    这个三个菜单使用的是同一张数据表. 所以我们肯定只写一个 list,add,edit页面的. 然后根据进入页面的路由来判断属于哪一个分类.并跳转指定分类的 新增,编辑, 和调用对应的列表接口页面

    开发

    由于三个模块使用的相同的页面.所以需要配置三份路由.并且做出页面区分 .然后现在遇到的问题是. 由于三个菜单虽然路由不同但是页面是同一个页面 .切换菜单的时候并不会再出触发vue的钩子函数 .然后三个list页面查询的数据相同.也就是不会触发查询方法.导致不能切换条件.

    然后网上搜了一下 watch监听时间. 发现可以通过监听实现路由变化的时候触发列表数据加载方法 . 具体代码如下

    列表页面的路由分别在list后面添加了1,2,3 用于区分是哪个页面

    image.png ```js watch: { '$route.path': function (newVal, oldVal) { // 参数 新旧路由path type是全局定义的 三个类型菜单 this.type = newVal.substr(newVal.lastIndexOf("/") + 1); this.search(); } },

    ```

    然后这样可以切换路由的时候,重新拉取列表数据. 同时create方法里面也需要调用search.因为路由监听只作用于本页面.其它页面切换路由到这个菜单时不会触发. js created () { let path = this.$route.path; this.type = path.substr(path.lastIndexOf("/") + 1); this.search(); },

    总结

    在实际开发中,可以根据自己的需求选择监听属性 ```js

    watch:{
    //监听路由变化 $route( to , from ){
    console.log( to , from ) // to , from 分别表示从哪跳转到哪,都是一个对象 // to.path ( 表示的是要跳转到的路由的地址 ); } }

    ```

    展开全文
  • 在实际的项目中,有一些页面是需要登录后才可以浏览,有一些功能需要登录权限。如果没限制用户未登录也可以通过url直接浏览,这需要我们路由上做一些限制。 在登录成功后,后端会返回一个唯一token,我们可以把这个...
  • router.currentRoute:当前的路由信息对象,我们可以通过router.currentRoute.fullPath获得解析后的 URL,包含查询参数和 hash 的完整路径,如果要访问的页面路由有命名(name)的话,可以通过router.currentRoute....
  • 页面动画切换,没做页面缓存,每个页面都要刷新(App.vue)*{margin: 0; padding: 0;}export default {data() {return {transitionName: ""}},watch: {'$route'() {if(window.$isBack != null){this.transitio...
  • 常见的页面路由场景要么是在列表点击关键字跳转详情页,要么就是选中一条记录,通过按钮跳转到新页面展示详情信息。 this.$router.push() 使用router.push()方法,这个方法会向history栈添加一个新纪录,所以,当...
  • 代码beforeRouteLeave: function(to, from , next){next(false)this.$confirm('您将离开本页面,是否进行数据保存?', '提示', {distinguishCancelAndClose: true,confirmButtonText: '确定',cancelButtonText: '...
  • vue-rouetr在实现页面前端路由时,提供了两种方式:Hash模式和History模式;根据mode参数来决定采用哪一种方式。 那为什么这两种方式能够实现试图更新不跳转,其原因在于: 1、Hash模式: hash(#)是URL 的锚点,...
  • 第二次进入页面页面路由参数已经改变,但是页面内容不会刷新。问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用。后来发现App.vue中使用了:keep-alive是Vue的内置组件,能在组件...
  • vue 路由页面缓存

    2021-08-04 14:47:02
    这次说说VUE里缓存页面的问题 现在前端做APP的话,估计很少人会直接去用VUE cli来写,因为那样特别麻烦,你得配置很多东西。填很多坑!现在如果要求前端H5来做个APP,估计大家很多都会选择uniapp,MUI等这些主流框架...
  • 前言:vue-router的切换不同于传统的页面的切换。路由之间的切换,其实就是组件之间的切换,不是真正的页面切换。这也会导致一个问题,就是引用相同组件的时候,会导致该组件无法更新,也就是我们口中的页面无法更新...
  • 检测到没有权限时,把当前页面路由及参数带给登陆页,登陆成功后,再跳回传过来的路由地址
  • 利用keep-alive 缓存需要缓存的页面
  • 这篇文章主要介绍了vue路由拦截及页面跳转的设置方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下路由设置:router/index.jsexport default new Router({routes: [{path: '/selfcenter',name: '...
  • 问题出在,我在电脑上做移动端页面的时候,相继跳到详情页,我想返回,点击按钮,直接跳转到了如上第一张图的样子,no,no,no,这不是我想要的结果,此刻,想到了通过改变url来改变页面的层级问题。一级的p...
  • Vue 路由切换时页面内容没有重新加载的解决方法第二次进入页面页面路由参数已经改变,但是页面内容不会刷新。问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用。后来发现App.vue中...
  • vue路由拦截及页面跳转的设置方法

    千次阅读 2020-12-19 12:23:03
    路由设置:router/index.jsmain.js:{if (to.matched.some(res => res.meta.requireAuth)) { // 验证是否需要登陆if (sessionStorage.getItem('sid')) { // 查询本地存储信息是否已经登陆next();} else {next({...
  • 今天上午在公司碰到了这种路由跳转同一页面的问题 首先我是通过路由传递参数的 简单来说就是我点底部导航时,第一次跳转到详情页没有问题,可是在跳转详情页之后,再去点击底部导航时就会出现参数改变但是...
  • 默认情况跳转至同一个路由地址(path相同,即使params或者query不同也算同一个)的话,只是浏览器url变了,其它是不会发生任何变化,这就是网友常说的“同一页面跳转,路由变了但是页面不刷新”。我们可以写两个测试...
  • vue局部页面路由跳转

    2021-06-28 15:58:22
    比如一个页面里面有两个甚至多个div,要求其中一个div显示某个路由页面: 在路由index.jse里面配置,写子路由children: <div class="design-right"> <router-view /> </div> 然后在你得div...
  • Vue路由跳转但显示空白页面

    千次阅读 2021-08-03 12:09:58
    在router文件下的index.js 中配置了‘Hi’的子路由,但是点击跳转界面却不显示子路由的内容,但是url正常改变。 原因一: 没有在父路由中加上<router-view></router-view>,来将对应的组件内容渲染到...
  • 最近用vue来做一个项目,到结尾的时候发现一个问题:不管...大家都知道使用Vue框架开发的应用是个单页面应用,里面用到的是路由的形式,并不像多页应用开发那样(下面附带区别)。所以想让网页的标题随着路由的改变而...
  • vue 路由页面之间实现用手指进行滑动的方法问题描述:vue 路由页面之间如何用手指进行滑动解决方法:1、下载依赖:npm intall vue-touch --save -D2、在需要滑动的页面添加标签; 注意要宽高,当页面有东西要写入时,...
  • app.vue 入口页面 <keep-alive :include="includedComponents"> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta....
  • Vue路由机制主要是通过两种模式实现的 第一种模式是hash模式 第二种是H5的history模式 这是默认的hash模式的路由: 改成history模式后 const router = new VueRouter({ mode:"history", routes }) ...
  • 前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。...当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访...
  • 使用全局路由守卫实现前端定义好路由,并且在路由上标记相应的权限信息const routerMap = [{path: '/permission',component: Layout,redirect: '/permission/index',alwaysShow: true, // will always show the root...
  • Vue实现动态路由

    2021-07-18 21:04:46
    动态路由设置一般有两种: 简单的角色路由设置:比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置 复杂的路由权限设置:比如OA系统、多种角色的权限配置。通常需要后端返回路由列表,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 45,796
精华内容 18,318
关键字:

vue路由是如何实现页面更新

vue 订阅