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>

左側文件目錄:


?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容