VUE脚手架router 解决传参不刷新,刷新跳转替换,钩子函数,路由元信息

1.解决传参不刷新方式:

App.vue 界面

<template>

  <div id="app">

    <nav>

      <button @click="goAbout">跳转about</button> |

      <button @click="goVip">跳转vip</button> |

    </nav>

    <router-view />

  </div>

</template>

<script>

export default {

  name: "App",

  methods: {

    goAbout() {

      /* 动态路由的方式 id传过去是数字类型 刷新之后是字符串类型 */

      /* ▲不采用动态路由的方式 第一次id是可以发送出去的是数字类型

            ★但是采用params的方式一刷新值就消失了 */

      this.$router.push({

        /* 用params传值,只能采用name方式不能采用path,否则id就传不过去 */

        /* params 传参 参数不会在地址栏展示出来 */

        name: "aboutpage",

        params: {

          id: 1000,

        },

      });

      /* 如果不采用动态路由的方式 想刷新还存在就使用本地缓存的方式 */

    },

    goVip() {

      /* id传过去是数字类型刷新之后是字符串类型 */

      /* 采用query的方式传参好在刷新之后值不会消失 */

      /* query 传参可以使用path的方式 params不可以 */

      /* 使用query传参 参数是会在地址栏明文展示出来 */

      this.$router.push({

        path: "/vip",

        query: {

          id: 2000,

        },

      });

    },

AboutPage.vue界面

<template>

  <div>

      <h1>我是AbouPage</h1>

  </div>

</template>

<script>

export default {

name:"AboutPage",

created(){

    /* 第一次拿到id的时候 就存在本地缓存中 */

    if(this.$route.params.id){

    localStorage.id = this.$route.params.id

    }


    /* 如果刷新页面this.$route.params.id的值为undefined 则为false

       就取本地缓存中的id的值 */

    let id = this.$route.params.id||localStorage.id

    console.log(id);

  },

}

VipPage.vue界面:

<template>

  <div>

      <h1>

          我是VipPage

      </h1>

  </div>

</template>

<script>

export default {

name:"VipPage",

    created() {

        console.log(this.$route.query.id);

    },

}

2.刷新跳转替换:

<template>

  <div>

      <h1>我是AbouPage</h1>

      <router-link to="/vip">跳转到vip</router-link>

      <a @click="goBack" href="javascript:;">返回上一页</a> |

      <a @click="goReload" href="javascript:;">刷新</a> |

      <a @click="goNext" href="javascript:;">返回下一页</a> |

      <a @click="goReplace" href="javascript:;">替换当前页</a> |

  </div>

</template>

<script>

export default {

name:"AboutPage",

created(){

    /* 第一次拿到id的时候 就存在本地缓存中 */

    if(this.$route.params.id){

    localStorage.id = this.$route.params.id

    }


    /* 如果刷新页面this.$route.params.id的值为undefined 则为false

       就取本地缓存中的id的值 */

    let id = this.$route.params.id||localStorage.id

    console.log(id);

  },

  methods:{

    /* 返回上一页 */

    /* 第一种方法 */

      goBack(){

      /* this.$router.back() */

      /* 第二种方法 */

      this.$router.go(-1)

  },

  goReload(){

    /* 刷新当前页面 */

    this.$router.go(0)

  },

  goNext(){

    /* 去下一页 */

    /* this.$router.go(1) */

    this.$router.forward()

  },

  goReplace(){

    /* 替换当前页为vip页面 */

    /* 把页面销毁了,自己取而代之 */

    this.$router.replace('/vip')

  }


  }


}

</script>

<style>

</style>

3.钩子函数案例:

App.vue界面:

<template>

  <div id="app">

    <nav>

      <router-link to="/">Home</router-link> |

      <router-link to="/about">About</router-link> |

      <button @click="goAbout">跳转about</button> |

      <button @click="goVip">跳转vip</button> |

      <button @click="goVip1">跳转vip----params001</button> |

      <button @click="goVip2">跳转vip----params002</button> |

      <button @click="goVip3">跳转vip----params003</button> |

      <router-link to="/meta">路由原信息页面</router-link> |

    </nav>

    <router-view />

  </div>

</template>

<script>

export default {

  name: "App",

  methods: {

    goAbout() {

      /* 动态路由的方式 id传过去是数字类型 刷新之后是字符串类型 */

      /* ▲不采用动态路由的方式 第一次id是可以发送出去的是数字类型

            ★但是采用params的方式一刷新值就消失了 */

      this.$router.push({

        /* 用params传值,只能采用name方式不能采用path,否则id就传不过去 */

        /* params 传参 参数不会在地址栏展示出来 */

        name: "aboutpage",

        params: {

          id: 1000,

        },

      });

      /* 如果不采用动态路由的方式 想刷新还存在就使用本地缓存的方式 */

    },

    goVip() {

      /* id传过去是数字类型刷新之后是字符串类型 */

      /* 采用query的方式传参好在刷新之后值不会消失 */

      /* query 传参可以使用path的方式 params不可以 */

      /* 使用query传参 参数是会在地址栏明文展示出来 */

      this.$router.push({

        path: "/vip",

        query: {

          id: 2000,

        },

      });

    },

   goVip1() {

      this.$router.push({

        name: "vippage",

        query: {

          id: 1,

        },

      });

    },

    goVip2() {

      this.$router.push({

        name: "vippage",

        query: {

          id: 2,

        },

      });

    },

    goVip3() {

      this.$router.push({

        name: "vippage",

        query: {

          id: 3,

        },

      });

    },

  },

};

</script>

VipPage.vue界面:

<template>

  <div>

      <h1>

          我是VipPage

      </h1>

  </div>

</template>

<script>

export default {

name:"VipPage",

    created() {

        console.log(this.$route.query.id);

    },

    /* 既然写了组件内的钩子函数 里面next()方法必须执行一次 */

    /* 已进入组件立即执行 */

    beforeRouteEnter(to,from,next){

    console.log('进入vip页面')

    console.log('to',to);

    /* 守卫执行前 组件实例还没被创建 */

    console.log(this);

    /* 怎么获取this呢 */

    next(vm=>{

        console.log('vm',vm.$route.query.id);

    })

    console.log('from',from);

    /* next(); */

    alert('欢迎光临请充值')

    },

    /* 当query 传参的时候 参数的值发生了变化也会执行 组件路由更新钩子函数

        query传参 类似于get请求 */

     /* ★ params传参的时候是不会触发组件路由更新钩子函数的 */

    beforeRouteUpdate(to,from,next){

    console.log('更新vip页面');

    console.log('to',to);

    console.log('from',from);

    /* 在 beforeRouteUpdate 组件实例已生成可以获取到this*/

    console.log(this);

    /* 在这里不可以使用this.$route.query.id

       因为会获取之前的id不是跳转后的id */

    let id = to.query.id

    if(id==1){

        alert('买本vue')

    }

    if(id==2){

        alert('买本js')

    }

    if(id==3){

        alert('买本react')

    }

    next()

    },

    /* 离开组件立即执行 */

    beforeRouteLeave(to,from,next){

    console.log('离开vip页面');

    console.log('to',to);

    console.log('from',from);

    /* 当你要离开vip页面的时候

       弹出confirm提示: 判断 点击确定 则跳转 取消则不跳转*/

    /* next(false) 值为false 表示阻止路由跳转 */

    /* next(true) */


     if(confirm('您不再充钱了嘛')){

         next(true)

     }else{

         next(false)

     }

    },

}

</script>

<style>

</style>

4.路由元信息:

在router下的index.js配置路由元信息:

import Vue from 'vue'

import VueRouter from 'vue-router'

import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [

  {

    path: '/',

    name: 'home',

    component: HomeView

  },

  {

    path: '/about',

    name: 'about',

    // route level code-splitting

    // this generates a separate chunk (about.[hash].js) for this route

    // which is lazy-loaded when the route is visited.

    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')

  },{

    path:'/AboutPage',

    name:'aboutpage',

    component:()=>import('@/views/AboutPage.vue'),

    /* 局部路由钩子 */

   beforeEnter: (to, from, next) => {

     console.log(to);

     console.log(from);

     next()

   }

  {

    path:'/meta',

    name:'metapage',

    component:()=>import('@/views/MetaPage.vue'),

    meta:{

      title:'路由元信息',

      flag:true

    }

  }

]

MetaPage.vue文件:

<template>

  <div>

      <h1>MetaPage</h1>

      <h2>{{msg}}</h2>

  </div>

</template>

<script>

export default {

  name:"MetaPage",

  data(){

      return{

       msg:'',

      }

  },

  created(){

      document.title = this.$route.meta.title

      console.log(this.$route);

      /* 路由元信息里面设置flag 如果flag 是true 则页面显示您是管理员

         否则显示您是 普通用户 */


         if(this.$route.meta.flag==true){

            this.msg = '您是管理员'

         }else{

             this.msg = '您是普通用户请充钱'

         }

  }

}

</script>

<style>

</style>

左侧文件目录:


©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,504评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,434评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,089评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,378评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,472评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,506评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,519评论 3 413
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,292评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,738评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,022评论 2 329
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,194评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,873评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,536评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,162评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,413评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,075评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,080评论 2 352

推荐阅读更多精彩内容