精华内容
下载资源
问答
  • vue路由跳转清空数据

    千次阅读 2020-07-01 13:09:58
    修改和添加都是使用的同一个页面,在修改页直接跳转到添加页时页面数据不清空 问题代码❌ created() { this.init() }, methods: { init(){ if(this.$route.params && this.$route.params.id){ //从...

    修改和添加都是使用的同一个页面,在修改页直接跳转到添加页时页面数据不清空

    问题代码❌

     created() {  
        this.init()
     },
      methods: {
          init(){
            if(this.$route.params && this.$route.params.id){
              //从路径获取id值
              const id = this.$route.params.id
              //调用根据id查询的方法
               this.getInfo(id)
            }else {
              //如果没有值则清空表单
              this.teacher= {}
            }
          }
       }
    

    原因是created()在页面渲染之前执行一次,执行一次后不再加载了。

    解决办法⚡️加上路由监听使每次跳转后都会触发init()方法进行判断清空表单

    created() {
          this.init()
        },
        watch: {  //监听
          $route(to, from) { //路由变化方式,路由发生变化,方法就会执行
            this.init()
          }
        },
        methods: {
          init(){
            if(this.$route.params && this.$route.params.id){
              //从路径获取id值
              const id = this.$route.params.id
              //调用根据id查询的方法
               this.getInfo(id)
            }else {
              //如果没有值则清空表单
              this.teacher= {}
            }
          }
       }
    
    展开全文
  • vue 路由跳转,参数消失问题 1. 参数传递页面:这种方式页面刷新参数丢失。 // 点击跳转详情页面 toDetail(){ this.$router.push({ name:"newsDetail", params:{content:item}//传递过去的参数 }) } 页面取...

    vue 路由跳转,参数消失问题

    1. 参数传递页面:这种方式页面刷新参数丢失。

    // 点击跳转详情页面

       toDetail(){
            this.$router.push({
                name:"newsDetail",
                params:{content:item}//传递过去的参数
            })
        }
    

    页面取参数 :this.$route.params.comtent

    2. 刷新参数不会丢失

    this.$router.push({
          path: "/newsDetail",
          query: {
            content: JSON.stringify(item),
          },
        });
    

    页面取参数 :this.$route.query.comtent // 此处使用时应用JSON.parse转换参数

    3. 参数不会丢失

    路由配置

      {
          path: "workDetail/:id",
          name: "WorkDetail",
          component: () => import("@/page/workDetail")
     }
    

    页面跳转事件

      getDetail(id) {
          this.$router.push("/workDetail/" + id);
        },
    
    

    取参: this.$route.params.id

    展开全文
  • 于是乎想到了先清空路由: resetRouter() { const newRouter = new Router({ mode: 'hash', // scrollBehavior: () => ({ y: 0 }), routes: constantRoutes, //引入的公共路由 base: process.e

    刚做的项目分多个模块,点击后再查询菜单,动态加进路由,直接动态添加则爆出警告信息(路由重复):

    于是乎想到了先清空路由:

    resetRouter() {
          const newRouter = new Router({
            mode: 'hash', // 
            scrollBehavior: () => ({ y: 0 }),
            routes: constantRoutes,  //引入的公共路由
            base: process.env.BASE_URL,
          });
          router.matcher = newRouter.matcher; // reset router
        }

    再进行动态添加即可:

    router.addRoutes(routers);

     

    展开全文
  • vue清除地址栏路由参数

    万次阅读 2020-04-09 14:44:03
    let path = this.$route.path; //先获取路由路径 this.$router.push(path); //再跳转路由路径,query参数没带过去,所以被清除了

    方式一:

    let path = this.$route.path; //先获取路由路径
    this.$router.push(path); //再跳转路由路径,query参数没带过去,所以被清除了
    

    方式二:(摘自评论)

    this.$router.push({ query: {} });
    
    展开全文
  • VUE路由传参

    2019-08-15 09:46:08
    传参方法很多种,主要讲解最常用的query语法,优点F5刷新页面后不会被清空query语法:由于参数是用路径传参的,所以F5强制刷新也不会被清空 (1)新建商品详情页组件GoodInfo.vue (2)配置路由(router/index.js) ...
  • created,只要加载页面就会执行,只执行一次,多次路由跳转也只执行一次,导致复用同一页面的时候,页面数据同样会被渲染过去。 例如:有个添加用户和修改用户的功能,同时使用添加用户这个页面,修改用户的话需要做...
  • Vue路由

    2019-07-31 02:10:00
    一. 作业案例  1.... 子组件OptionCard.vue文件: <template> <div id="OptionCard"> <div class="title_box"> <span v-for="item, key in select_list" :cla...
  • Vue路由之组件切换

    千次阅读 2019-03-05 15:28:57
    Vue路由之组件切换 今天我们来简单说一下Vue的路由实现组件之间的切换。 利用Vue的路由实现组件之间的切换,大致需要五步走: 导入Vue-router.js包 创建子组件 创建路由对象 把路由和我们的VM(view model)关联起来 ...
  • 页面路由跳转传递参数方式: 注意 query里面的不要写对象,写具体的参数,不然传过去下一个页面后,参数刷新就会变成[object,object]。 具体的参数的值先用JSON.stringify转,再接受的时候转回来。 用JSON.parse把...
  • Vue路由介绍及使用

    2020-08-19 16:45:46
    Vue路由代码介绍vue路由实现多视图单页Web应用引入依赖库创建自定义组件定义路由(即路线)创建路由器,传 `routes` 配置创建和挂载根实例。router-link相关属性代码实现页面效果 代码介绍 vue路由实现多视图单页Web...
  • 场景:vue-router实现的单页应用,登录页调用登录接口后,服务器返回用户信息,然后通过router.push({name: ‘index’, params: res.data})传给主页组件,并在主页显示数据。但是刷新页面后,数据就消失了。 解决...
  • 背景:默认进行路由缓存,关闭el-tag标签后,清空该标签对应的路由的缓存,下次打开时,也是默认缓存。 keep-alive是不支持动态删除缓存,所以我们需要通过一些特殊的方法,来实现动态删除路由缓存,top:即看一下...
  • 参考:https://blog.csdn.net/qq_43103581/article/details/82260073(vue 路由传递参数,刷新页面后参数丢失) 项目功能需要,要从列表页跳转到第三方提供的URL上(这里第三方页面我是通过iframe引入在详情页,...
  • vue路由的钩子函数

    2019-03-19 15:14:27
    vue路由的钩子函数 vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消。 路由钩子分为三类: 全局的、单个路由独享的、或者组件级的 全局钩子: 主要包括beforeEach和aftrEach,这类钩子主要作用于...
  • Vue 路由缓存

    2017-11-19 18:51:00
    问题 在路由切换时不需要每次 点击都刷新子路由 尤其是在form表单的情况下 不能让用户 输入一半... vue 2.0 之中 有keep-alive 详情 见Vue 官网 <keep-alive> <router-view :key="key"></ro...
  • vue 路由页面缓存

    2021-08-04 14:47:02
    VUE框架真的很神奇,神奇到好多坑你都要填 这次说说VUE里缓存页面的问题 现在前端做APP的话,估计很少人会直接去用VUE cli来写,因为那样特别麻烦,你得配置很多东西。填很多坑!现在如果要求前端H5来做个APP,估计...
  • vue路由传参,刷新页面不丢失参数

    千次阅读 2020-01-01 03:28:11
    通过配置name传参,name是你要跳转的路由名字 this.$router.push({ name: 'content', params: { id: id } }) 在content页面,使用params获取 created () { this.articleId = this.$route.params.id } 在...
  • vue 路由问题

    2018-03-16 16:10:00
    路由跳转:  {  name:user,  path: '/user/:id',  components: user ... 1.this.$router.push('/... 可以带在路由已经定义的参数 => this.$router.push('/user/id'+id)  2.this.$router.push({name: r...
  • 今天小编就为大家分享一篇关于vue路由缓存清除在main.js中的设置,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • router 退出回到首页清空数据 this.$router.replace({path: '/login'}); location.reload();
  • 2018-08-15 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>...script src="../vue.js"></script> <...
  • 在一个页面中定时器调用一个接口,切换别的路由时候定时器需要清空。是在mounted 和beforeDestroy做的不起用 1.data中定义timers:null 2.使用定时器调接口,摧毁时候清空定时器不起作用 mounted () { this....
  • vue 路由跳转页面

    2021-05-12 16:07:46
    第一个页面通过: this.$router.push({ path: “/homecourseall”, query: { id: id } }); 跳转到另外一个页面 将跳转页面的id 传输的另外一个页面 第二个页面: this.route.query.id ...如果想要显示全部的话将数据清空
  • 方法一:$router里使用query对象 路由参数跳转 this.$router.push({ name: 'IcProjectView',//跳转的路由路由的name) params: {//params id: params.row.id
  • 第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新。 问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用。后来发现App.vue中使用了<keep>: <router></router> ...
  • 首先先介绍路由跳转的方法1、router-link简单跳转:&lt;router-link to="/path"&gt;&lt;/router-link&gt;2、$router方式(js跳转)this.$router.push({ path:'/path', //路径 name:'...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,457
精华内容 1,782
关键字:

vue路由参数清空

vue 订阅