當(dāng)前位置：首頁 > news >正文

裝飾裝修網(wǎng)站建設(shè)方案做網(wǎng)絡(luò)銷售如何找客戶

news 2025/7/11 10:25:19

裝飾裝修網(wǎng)站建設(shè)方案,做網(wǎng)絡(luò)銷售如何找客戶,從化建設(shè)局網(wǎng)站關(guān)停,單頁網(wǎng)站做淘寶客文章目錄相關(guān)理解vue-router的理解對SPA應(yīng)用的理解路由的理解基本路由幾個注意點嵌套路由——多級路由路由query參數(shù)命名路由路由的params參數(shù)路由的props配置路由跳轉(zhuǎn)的replace方法編程式路由導(dǎo)航緩存路由組件路由組件獨有的生命鉤子activated和deactivated路由守衛(wèi)全局路由守…

文章目錄

相關(guān)理解
- - vue-router的理解
  - 對SPA應(yīng)用的理解
  - 路由的理解
基本路由
- 幾個注意點
嵌套路由——多級路由
路由query參數(shù)
命名路由
路由的params參數(shù)
路由的props配置
路由跳轉(zhuǎn)的replace方法
編程式路由導(dǎo)航
緩存路由組件
路由組件獨有的生命鉤子
- activated和deactivated
路由守衛(wèi)
- 全局路由守衛(wèi)
- 獨享路由守衛(wèi)
- 組件內(nèi)路由守衛(wèi)
路由器的兩種工作模式

基本路由

下載vue-router：npm i vue-router

About.vue

<template><h2>我是About組件的內(nèi)容</h2></template><script>export default {name:'About'}</script>

Home.vue

<template><h2>我是Home組件的內(nèi)容</h2></template><script>export default {name:'Home'}</script>

src/router/index.js

//該文件專門用于創(chuàng)建整個應(yīng)用的路由器
import VueRouter from "vue-router";
//引入組件
import Home from '../components/Home'
import About from '../components/About'//創(chuàng)建并暴露一個路由器
export default new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home}]
})

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'Vue.config.productionTip = false
Vue.use(VueRouter)new Vue({el:"#app",render: h => h(App),router
})

App.vue

<template><div><div class="row"><div class="col-xs-offset-2 col-xs-8"><div class="page-header"><h2>Vue Router Demo</h2></div></div></div><div class="row"><div class="col-xs-2 col-xs-offset-2"><div class="list-group"><!-- 原始html中我們使用a標(biāo)簽實現(xiàn)頁面跳轉(zhuǎn) --><!-- <a class="list-group-item active" href="./about.html">About</a><a class="list-group-item" href="./home.html">Home</a> --><!-- Vue中借助router-link標(biāo)簽實現(xiàn)路由的切換 --><router-link class="list-group-item" active-class="active" to="/about"> 			About</router-link><router-link class="list-group-item" active-class="active" to="/home">Home</router-link></div></div><div class="col-xs-6"><div class="panel"><div class="panel-body"><!-- 指定組件的呈現(xiàn)位置 --><router-view></router-view></div></div></div></div></div>
</template><script>export default {name:'App',}
</script>

在這里插入圖片描述

總結(jié)：

安裝vue-router，命令：npm i vue-router
應(yīng)用插件：Vue.use(VueRouter)

編寫router配置項：

//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 組件
import About from '../components/About'
import Home from '../components/Home'//創(chuàng)建router實例對象，去管理一組一組的路由規(guī)則
const router = new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home}]
})
export default router

首先引入對應(yīng)的組件，然后配置路由的key:value格式的數(shù)據(jù)
//暴露router export default router

實現(xiàn)切換（active-class可配置高亮樣式）：

<router-link active-class="active" to="/about">About</router-link>
<router-view></router-view>來指定我們的路由組件的顯示地方

指定展示位：

<router-view></router-view>

幾個注意點

路由組件通常存放在pages文件夾，一般組件通常存放在components文件夾
通過切換，“隱藏”了的路由組件，默認(rèn)是被銷毀掉的，需要的時候再去掛載
每個組件都有自己的$route屬性，里面存儲著自己的路由信息
整個應(yīng)用只有一個router，可以通過組件的$router屬性獲取到

嵌套路由——多級路由

home.vue

<template><div><h2>Home組件內(nèi)容</h2><div><ul class="nav nav-tabs"><li><router-link class="list-group-item" active-class="active" to="/home/news"> News</router-link></li><li><router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link></li></ul><router-view></router-view></div></div>
</template><script>export default {name:'Home'}
</script>

About.vue

<template><h2>我是About組件的內(nèi)容</h2></template><script>export default {name:'About'}</script>

News.vue

<template><ul><li>news001</li><li>news002</li><li>news003</li></ul>
</template><script>export default {name:'News'}
</script>

router/index.js

//該文件專門用于創(chuàng)建整個應(yīng)用的路由器
import VueRouter from "vue-router";
//引入組件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'//創(chuàng)建并暴露一個路由器
export default new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home,children:[{path:'news',component:News},{path:'message',component:Message}]}]
})

在這里插入圖片描述

總結(jié)：

配置多級路由規(guī)則，使用children配置項：

routes:[{path:'/about',component:About,},{path:'/home',component:Home,children:[ //通過children配置子級路由{path:'news', //此處一定不要寫：/newscomponent:News},{path:'message', //此處一定不要寫：/messagecomponent:Message}]}
]

是在哪個路由組件中，就去對應(yīng)的router中配置children的子級路由

跳轉(zhuǎn)（要寫完整路徑）：<router-link to="/home/news">News</router-link>

路由query參數(shù)

將數(shù)據(jù)寫入queryString中來進(jìn)行數(shù)據(jù)傳遞

Messgae.vue

<template><div><ul><li v-for="m in messageList" :key="m.id"><!-- 跳轉(zhuǎn)路由并攜帶query參數(shù)，to的字符串寫法 --><!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; --><!-- 跳轉(zhuǎn)路由并攜帶query參數(shù)，to的對象寫法 --><router-link :to="{path:'/home/message/detail',query:{id:m.id,title:m.title}}">{{m.title}}</router-link>&nbsp;&nbsp;</li></ul><hr/><router-view></router-view></div>
</template><script>export default {name:'News',data(){return{messageList:[{id:'001',title:'消息001'},{id:'002',title:'消息002'},{id:'003',title:'消息003'}]}}}
</script>

Detail.vue

<template><ul><li>消息編號：{{$route.query.id}}</li><li>消息標(biāo)題：{{$route.query.title}}</li></ul>
</template><script>export default {name:'Detail'}
</script>

router/index.js

//該文件專門用于創(chuàng)建整個應(yīng)用的路由器
import VueRouter from "vue-router";
//引入組件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'//創(chuàng)建并暴露一個路由器
export default new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home,children:[{path:'news',component:News},{path:'message',component:Message,children:[{path:'detail',component:Detail}]}]}]
})

在這里插入圖片描述

總結(jié)：

傳遞參數(shù)

to的字符串寫法，我們需要給to加上：，因為是為了讓其識別query參數(shù)，所以要將其識別為js語法，而不是字符串,為了能使用模板${},所以字符串內(nèi)寫成 "``"

 <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link><!-- 跳轉(zhuǎn)并攜帶query參數(shù)，to的對象寫法 -->
<router-link :to="{path:'/home/message/detail',query:{id:666,title:'你好'}
}">跳轉(zhuǎn)</router-link>

如果比較復(fù)雜，就寫成對象模式，不負(fù)責(zé)就寫成字符串形式

接收參數(shù)：

$route.query.id
$route.query.title

命名路由

//該文件專門用于創(chuàng)建整個應(yīng)用的路由器
import VueRouter from "vue-router";
//引入組件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'//創(chuàng)建并暴露一個路由器
export default new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home,children:[{path:'news',component:News},{//name配置項為路由命名name:'xiangqing',path:'message',component:Message,children:[{path:'detail',component:Detail}]}]}]
})

使用路由名進(jìn)行跳轉(zhuǎn)

<template><div><ul><li v-for="m in messageList" :key="m.id"><!-- 跳轉(zhuǎn)路由并攜帶query參數(shù)，to的字符串寫法 --><!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; --><!-- 跳轉(zhuǎn)路由并攜帶query參數(shù)，to的對象寫法 --><router-link :to="{//使用name進(jìn)行跳轉(zhuǎn)name:'xiangqing',query:{id:m.id,title:m.title}}">{{m.title}}</router-link>&nbsp;&nbsp;</li></ul><hr/><router-view></router-view></div>
</template><script>export default {name:'News',data(){return{messageList:[{id:'001',title:'消息001'},{id:'002',title:'消息002'},{id:'003',title:'消息003'}]}}}
</script>

總結(jié)：

命名路由：

作用：可以簡化路由的跳轉(zhuǎn)

如何使用：

給路由命名在路由配置中，給對應(yīng)的路由配置name屬性

{path:'/demo',component:Demo,children:[{path:'test',component:Test,children:[{name:'hello' //給路由命名path:'welcome',component:Hello,}]}]
}

簡化跳轉(zhuǎn)：

我們在跳轉(zhuǎn)的時候可以使用path方式，也可以使用name方式
- 如果是使用對象形式實現(xiàn)name跳轉(zhuǎn)，在對象中就可以配置name屬性
- 如果使用字符串使用name方式，實現(xiàn)字符串的對象形式實現(xiàn)

<!--簡化前，需要寫完整的路徑 -->
<router-link to="/demo/test/welcome">跳轉(zhuǎn)</router-link><!--簡化后，直接通過名字跳轉(zhuǎn) -->
<router-link :to="{name:'hello'}">跳轉(zhuǎn)</router-link><!--簡化寫法配合傳遞參數(shù) -->
<router-link :to="{name:'hello',query:{id:666,title:'你好'}}"
跳轉(zhuǎn)</router-link>

路由的params參數(shù)

將數(shù)據(jù)寫在url中，來進(jìn)行數(shù)據(jù)傳遞

Message.vue

<template><div><ul><li v-for="m in messageList" :key="m.id"><!-- 跳轉(zhuǎn)路由并攜帶params參數(shù)，to的字符串寫法 --><!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; --><!-- 跳轉(zhuǎn)路由并攜帶params參數(shù)，to的對象寫法 --><router-link :to="{name:'xiangqing',params:{id:m.id,title:m.title}}">{{m.title}}</router-link>&nbsp;&nbsp;</li></ul><hr/><router-view></router-view></div>
</template><script>export default {name:'News',data(){return{messageList:[{id:'001',title:'消息001'},{id:'002',title:'消息002'},{id:'003',title:'消息003'}]}}}
</script>

Detail.vue

<template><ul><li>消息編號：{{$route.params.id}}</li><li>消息標(biāo)題：{{$route.params.title}}</li></ul>
</template><script>export default {name:'Detail'}
</script>

router/idnex.js

//該文件專門用于創(chuàng)建整個應(yīng)用的路由器
import VueRouter from "vue-router";
//引入組件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'//創(chuàng)建并暴露一個路由器
export default new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home,children:[{path:'news',component:News},{path:'message',component:Message,children:[{name:'xiangqing',path:'detail/:id/:title',//使用占位符聲明接收params參數(shù)component:Detail}]}]}]
})

總結(jié)

我們在路由配置中使用占位符聲明接收的params參數(shù)

{path:'/home',component:Home,children:[{path:'news',component:News},{component:Message,children:[{name:'xiangqing',path:'detail/:id/:title', //使用占位符聲明接收params參數(shù)component:Detail}]}]
}

跳轉(zhuǎn)路由時候，需要帶著對應(yīng)的params數(shù)據(jù)
- 字符串形式
- 對象形式

<!-- 跳轉(zhuǎn)并攜帶params參數(shù)，to的字符串寫法 -->
<router-link :to="/home/message/detail/666/你好">跳轉(zhuǎn)</router-link><!-- 跳轉(zhuǎn)并攜帶params參數(shù)，to的對象寫法 -->
<router-link :to="{name:'xiangqing',params:{id:666,title:'你好'}}"
>跳轉(zhuǎn)</router-link>

特別注意：路由攜帶params參數(shù)時，若使用to的對象寫法，則不能使用path配置項，必須使用name配置！

使用數(shù)據(jù)使用$route.params.屬性名

$route.params.id
$route.params.title

路由的props配置

我們?nèi)トarams的數(shù)據(jù)或者是query數(shù)據(jù)，都需要通過this.route.params或者是this.route.query，如果都寫在組件中，就會顯示的很長，所以我們可以通過props來進(jìn)行簡化，將對應(yīng)的數(shù)據(jù)直接轉(zhuǎn)換成我們的props中的數(shù)據(jù)

Message.vue

<template><div><ul><li v-for="m in messageList" :key="m.id"><router-link :to="{name:'xiangqing',params:{id:m.id,title:m.title}}">{{m.title}}</router-link>&nbsp;&nbsp;</li></ul><hr/><router-view></router-view></div>
</template><script>export default {name:'News',data(){return{messageList:[{id:'001',title:'消息001'},{id:'002',title:'消息002'},{id:'003',title:'消息003'}]}}}
</script>

index.js

//該文件專門用于創(chuàng)建整個應(yīng)用的路由器
import VueRouter from "vue-router";
//引入組件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'//創(chuàng)建并暴露一個路由器
export default new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home,children:[{path:'news',component:News},{path:'message',component:Message,children:[{name:'xiangqing',path:'detail/:id/:title',component:Detail,//props的第一種寫法，值為對象，該對象中的所有key-value都會以props的形式傳給Detail組件。// props:{a:1,b:'hello'}//props的第二種寫法，值為布爾值，若布爾值為真，就會把該路由組件收到的所有params參數(shù)，以props的形式傳給Detail組件。// props:true//props的第三種寫法，值為函數(shù)props($route){return {id:$route.params.id,title:$route.params.title,}}}]}]}]
})

Detail.vue

<template><ul><li>消息編號：{{id}}</li><li>消息標(biāo)題：{{title}}</li></ul>
</template><script>export default {name:'Detail',props:['id','title']}
</script>

總結(jié)：

作用：讓路由組件更方便的收到參數(shù)

{name:'xiangqing',path:'detail/:id',component:Detail,//第一種寫法：props值為對象，該對象中所有的key-value的組合最終都會通過props傳給Detail組件// props:{a:900}//第二種寫法：props值為布爾值，布爾值為true，則把路由收到的所有params參數(shù)通過props傳給Detail組件// props:true//第三種寫法：props值為函數(shù)，該函數(shù)返回的對象中每一組key-value都會通過props傳給Detail組件props(route){return {id:route.query.id,title:route.query.title}}
}

三種寫法
- 第一種比較死板，是寫死在我們的路由配置中，不管怎么跳轉(zhuǎn)都有這個數(shù)據(jù)
- 第二種只能用于params方式傳值轉(zhuǎn)換為我們的props
- 第三種比較靈活這種方式就將組件中的業(yè)務(wù)邏輯轉(zhuǎn)移到配置中，組件就專注頁面，不會那么復(fù)雜

路由跳轉(zhuǎn)的replace方法

<template><div><h2>Home組件內(nèi)容</h2><div><ul class="nav nav-tabs"><li><router-link replace class="list-group-item" active-class="active" to="/home/news">News</router-link></li><li><router-link replace class="list-group-item" active-class="active" to="/home/message">Message</router-link></li></ul><router-view></router-view></div></div>
</template><script>export default {name:'Home'}
</script>

總結(jié)：

作用：控制路由跳轉(zhuǎn)時操作瀏覽器歷史記錄的模式
瀏覽器的歷史記錄有兩種寫入方式：push和replace，其中push是追加歷史記錄，replace是替換當(dāng)前記錄。路由跳轉(zhuǎn)時候默認(rèn)為push方式
- 每進(jìn)一個路由，就會往棧中進(jìn)入一個路由記錄，如果是push狀態(tài)，就是一直往棧頂進(jìn)入一個新的路由記錄
- 如果是replace模式，那么每進(jìn)一個路由，就把棧頂?shù)穆酚捎涗涍M(jìn)行替換
開啟replace模式：<router-link replace ...>News</router-link>

編程式路由導(dǎo)航

我們有時候的進(jìn)行路由跳轉(zhuǎn)可能是通過點擊按鈕來進(jìn)行路由跳轉(zhuǎn)，所以就用不了我們的<router-link>,這時候就會用到我們的編程式導(dǎo)航

Banner.vue

<template><div class="col-xs-offset-2 col-xs-8"><div class="page-header"><h2>Vue Router Demo</h2><button @click="back">后退</button><button @click="forward">前進(jìn)</button><button @click="test">測試一下go</button></div></div>
</template><script>export default {name:'Banner',methods:{back(){this.$router.back()},forward(){this.$router.forward()},test(){this.$router.go(3)}},}
</script>

Message.vue

<template><div><ul><li v-for="m in messageList" :key="m.id"><router-link :to="{name:'xiangqing',params:{id:m.id,title:m.title}}">{{m.title}}</router-link><button @click="showPush(m)">push查看</button><button @click="showReplace(m)">replace查看</button></li></ul><hr/><router-view></router-view></div>
</template><script>export default {name:'News',data(){return{messageList:[{id:'001',title:'消息001'},{id:'002',title:'消息002'},{id:'003',title:'消息003'}]}},methods:{showPush(m){this.$router.push({name:'xiangqing',query:{id:m.id,title:m.title}})},showReplace(m){this.$router.replace({name:'xiangqing',query:{id:m.id,title:m.title}})}}}
</script>

總結(jié)：

作用：不借助<router-link>實現(xiàn)路由跳轉(zhuǎn)，讓路由跳轉(zhuǎn)更加靈活

具體編碼：

this.$router.push({name:'xiangqing',params:{id:xxx,title:xxx}
})this.$router.replace({name:'xiangqing',params:{id:xxx,title:xxx}
})
this.$router.forward() //前進(jìn)
this.$router.back() //后退
this.$router.go() //可前進(jìn)也可后退

緩存路由組件

我們知道從一個路由切換到另一個路由，會導(dǎo)致前一個路由頁面銷毀，但是有時候我們在這個被銷毀的頁面填寫的數(shù)據(jù)，我們不希望數(shù)據(jù)消失，這時候就需要緩存路由了

News.vue

<template><ul><li>news001 <input type="text"></li><li>news002 <input type="text"></li><li>news003 <input type="text"></li></ul>
</template><script>export default {name:'News'}
</script>

Home.vue

<template><div><h2>Home組件內(nèi)容</h2><div><ul class="nav nav-tabs"><li><router-link replace class="list-group-item" active-class="active" to="/home/news">News</router-link></li><li><router-link replace class="list-group-item" active-class="active" to="/home/message">Message</router-link></li></ul><keep-alive include="News"><router-view></router-view></keep-alive></div></div>
</template><script>export default {name:'Home'}
</script>

總結(jié)：

作用：讓不展示的路由組件保持掛載，不被銷毀

具體編碼：

//緩存一個路由組件
<keep-alive include="News"> //include中寫想要緩存的組件名，不寫表示全部緩存<router-view></router-view>
</keep-alive>//緩存多個路由組件
<keep-alive :include="['News','Message']"> <router-view></router-view>
</keep-alive>

include里面寫的組件名，也就是我們組件中name屬性

路由組件獨有的生命鉤子

activated和deactivated

<template><ul><li :style="{opacity}">歡迎學(xué)習(xí)vue</li><li>news001 <input type="text"></li><li>news002 <input type="text"></li><li>news003 <input type="text"></li></ul>
</template><script>export default {name:'News',data(){return{opacity:1}},activated(){console.log('News組件被激活了')this.timer = setInterval(() => {this.opacity -= 0.01if(this.opacity <= 0) this.opacity = 1},16)},deactivated(){console.log('News組件失活了')clearInterval(this.timer)}}
</script>

總結(jié)：

activated和deactivated是路由組件所獨有的兩個鉤子，用于捕獲路由組件的激活狀態(tài)
具體使用：
1. activated路由組件被激活時觸發(fā)
2. deactivated路由組件失活時觸發(fā)

如果我們對路由頁面不進(jìn)行緩存，那么我們離開這個頁面就會觸發(fā)這個組件的銷毀，進(jìn)入時觸發(fā)組件的創(chuàng)建，但是我們?nèi)绻麑β酚身撁孢M(jìn)行緩存，那么我們離開的時候并不會導(dǎo)致組件的銷毀，但是有些東西我們希望離開頁面就不需要運行了，比如某些定時器，所以我們的可以使用activated和deactivated

路由守衛(wèi)

全局路由守衛(wèi)

//該文件專門用于創(chuàng)建整個應(yīng)用的路由器
import VueRouter from "vue-router";
//引入組件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'//創(chuàng)建一個路由器
const router = new VueRouter({routes:[{name:'guanyv',path:'/about',component:About,meta:{title:'關(guān)于'}},{name:'zhuye',path:'/home',component:Home,meta:{title:'主頁'},children:[{name:'xinwen',path:'news',component:News,meta:{isAuth:true,title:'新聞'}},{name:'xiaoxi',path:'message',component:Message,meta:{isAuth:true,title:'消息'},children:[{name:'xiangqing',path:'detail',component:Detail,meta:{isAuth:true,title:'詳情'},props($route){return {id:$route.query.id,title:$route.query.title,}}}]}]}]
})//全局前置路由守衛(wèi)————初始化的時候、每次路由切換之前被調(diào)用
router.beforeEach((to,from,next) => {console.log('前置路由守衛(wèi)',to,from)//to.meta.isAuth如果為true，說明我們這個頁面需要進(jìn)行權(quán)限驗證if(to.meta.isAuth){if(localStorage.getItem('school')==='atguigu'){next()}else{alert('學(xué)校名不對，無權(quán)限查看！')}}else{next()}
})//全局后置路由守衛(wèi)————初始化的時候被調(diào)用、每次路由切換之后被調(diào)用
router.afterEach((to,from)=>{console.log('后置路由守衛(wèi)',to,from)document.title = to.meta.title || '硅谷系統(tǒng)'
})//導(dǎo)出路由器
export default router

meta是我們路由提供給我們程序員來寫一些元數(shù)據(jù)的地方
next表示放行，也就是進(jìn)行了路由頁面跳轉(zhuǎn)
to表示當(dāng)前去哪個頁面
from表示當(dāng)前來自于哪個頁面

獨享路由守衛(wèi)

//該文件專門用于創(chuàng)建整個應(yīng)用的路由器
import VueRouter from "vue-router";
//引入組件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'//創(chuàng)建一個路由器
const router = new VueRouter({routes:[{name:'guanyv',path:'/about',component:About,meta:{title:'關(guān)于'}},{name:'zhuye',path:'/home',component:Home,meta:{title:'主頁'},children:[{name:'xinwen',path:'news',component:News,meta:{title:'新聞'},//獨享守衛(wèi)，特定路由切換之后被調(diào)用beforeEnter(to,from,next){console.log('獨享路由守衛(wèi)',to,from)if(localStorage.getItem('school') === 'atguigu'){next()}else{alert('暫無權(quán)限查看')}}},{name:'xiaoxi',path:'message',component:Message,meta:{title:'消息'},children:[{name:'xiangqing',path:'detail',component:Detail,meta:{title:'詳情'},props($route){return {id:$route.query.id,title:$route.query.title,}}}]}]}]
})//全局后置路由守衛(wèi)————初始化的時候被調(diào)用、每次路由切換之后被調(diào)用
router.afterEach((to,from)=>{console.log('后置路由守衛(wèi)',to,from)document.title = to.meta.title || '硅谷系統(tǒng)'
})//導(dǎo)出路由器
export default router

組件內(nèi)路由守衛(wèi)

<template><h2>我是About組件的內(nèi)容</h2>
</template><script>export default {name:'About',//通過路由規(guī)則，離開該組件時被調(diào)用beforeRouteEnter (to, from, next) {console.log('About--beforeRouteEnter',to,from)if(localStorage.getItem('school')==='atguigu'){next()}else{alert('學(xué)校名不對，無權(quán)限查看！')}},//通過路由規(guī)則，離開該組件時被調(diào)用beforeRouteLeave (to, from, next) {console.log('About--beforeRouteLeave',to,from)next()}}
</script>

總結(jié)：

作用：對路由進(jìn)行權(quán)限控制
分類：全局守衛(wèi)、獨享守衛(wèi)、組件內(nèi)守衛(wèi)

全局守衛(wèi)：

//全局前置守衛(wèi)：初始化時執(zhí)行、每次路由切換前執(zhí)行
router.beforeEach((to,from,next)=>{console.log('beforeEach',to,from)if(to.meta.isAuth){ //判斷當(dāng)前路由是否需要進(jìn)行權(quán)限控制if(localStorage.getItem('school') === 'atguigu'){ //權(quán)限控制的具體規(guī)則next() //放行}else{alert('暫無權(quán)限查看')}}else{next() //放行}
})//全局后置守衛(wèi)：初始化時執(zhí)行、每次路由切換后執(zhí)行
router.afterEach((to,from) => {console.log('afterEach',to,from)if(to.meta.title){ document.title = to.meta.title //修改網(wǎng)頁的title}else{document.title = 'vue_test'}
})

獨享守衛(wèi)：

beforeEnter(to,from,next){console.log('beforeEnter',to,from)if(localStorage.getItem('school') === 'atguigu'){next()}else{alert('暫無權(quán)限查看')}
}

組件內(nèi)守衛(wèi)：

//進(jìn)入守衛(wèi)：通過路由規(guī)則，進(jìn)入該組件時被調(diào)用
beforeRouteEnter (to, from, next) {...},
//離開守衛(wèi)：通過路由規(guī)則，離開該組件時被調(diào)用
beforeRouteLeave (to, from, next) {...},

路由器的兩種工作模式

對于一個url來說，什么是hash值？—— #及其后面的內(nèi)容就是hash值

hash值不會包含在 HTTP 請求中，即：hash值不會帶給服務(wù)器

hash模式：

地址中永遠(yuǎn)帶著#號，不美觀
若以后將地址通過第三方手機app分享，若app校驗嚴(yán)格，則地址會被標(biāo)記為不合法
兼容性較好

history模式：

地址干凈，美觀
兼容性和hash模式相比略差
應(yīng)用部署上線時需要后端人員支持，解決刷新頁面服務(wù)端404的問題

查看全文

http://www.risenshineclean.com/news/22046.html

中文亚洲精品无码_熟女乱子伦免费_人人超碰人人爱国产_亚洲熟妇女综合网

裝飾裝修網(wǎng)站建設(shè)方案做網(wǎng)絡(luò)銷售如何找客戶

文章目錄

相關(guān)理解

vue-router的理解

對SPA應(yīng)用的理解

路由的理解

基本路由

幾個注意點

嵌套路由——多級路由

路由query參數(shù)

命名路由

路由的params參數(shù)

路由的props配置

路由跳轉(zhuǎn)的replace方法

編程式路由導(dǎo)航

緩存路由組件

路由組件獨有的生命鉤子

activated和deactivated

路由守衛(wèi)

全局路由守衛(wèi)

獨享路由守衛(wèi)

組件內(nèi)路由守衛(wèi)

路由器的兩種工作模式

相關(guān)文章：