您好,登錄后才能下訂單哦!
這篇文章主要講解了“vue3怎么使用vue-router及路由權(quán)限攔截”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來(lái)研究和學(xué)習(xí)“vue3怎么使用vue-router及路由權(quán)限攔截”吧!
vue3 使用 vue-router 的方式和 vue2 基本一樣,只不過(guò)初始化路由時(shí)需要用到一些函數(shù)來(lái)定義而已,另外 vue-cli 工具本身在創(chuàng)建 vue3 項(xiàng)目時(shí)就可以根據(jù)提示來(lái)進(jìn)行安裝配置 vue-router , 所以本篇只是針對(duì)那些忘記安裝的小伙伴。
第一步肯定是要先安裝啦:npm install vue-router@4
接著我們?cè)诟夸?src 下創(chuàng)建 router 目錄并定義 index.js
下面是 src/router/index.js 的代碼
// 1. 引入這兩個(gè)函數(shù)來(lái)初始化路由 import { createRouter, createWebHashHistory } from "vue-router" // 2. 配置路由 const routes = [ { path: '/info', name: 'info', component: () => import('@/pages/info'), // 路由元信息,隨你怎么定義,筆者一般采用這種方式來(lái)定義路由權(quán)限然后結(jié)合路由攔截, // 下面的 auth:true 表示需要授權(quán)登錄才可以進(jìn)入此頁(yè)面。 meta: { auth: true, }, }, { path: '/login', name: 'login', component: () => import('@/pages/login'), meta: { auth: false, }, } ] // 3. 創(chuàng)建路由實(shí)例 const router = createRouter({ history: createWebHashHistory(), // 表示使用 hash 模式,即 url 會(huì)有 # 前綴 routes }) // 4. 你還可以監(jiān)聽路由攔截,比如權(quán)限驗(yàn)證。 router.beforeEach((to, from, next) => { // 1. 每個(gè)條件執(zhí)行后都要跟上 next() 或 使用路由跳轉(zhuǎn) api 否則頁(yè)面就會(huì)停留一動(dòng)不動(dòng) // 2. 要合理的搭配條件語(yǔ)句,避免出現(xiàn)路由死循環(huán)。 const token = cookies.get('token') if (to.meta.auth) { if (!token) { return router.replace({ name: 'login' }) } next() } else { next() } }) export default router
接下來(lái)在項(xiàng)目的入口文件 main.js 里面引入 router/index.js
// main.js import { createApp } from 'vue' import router from '@/router/index.js' // 引入 import App from '@/App.vue' const app = createApp(App) app .use(router) .mount('#app') export default app
至此就完成啦
cnpm i vue-router@next -D
創(chuàng)建Router對(duì)象和路由配置——routerIndex.js
import {createRouter, createWebHashHistory, createWebHistory} from "vue-router" // 1. 定義路由組件, 注意,這里一定要使用 文件的全名(包含文件后綴名) import countIndex from "../pages/count/countIndex.vue"; import langshanIndex from "../pages/langshan/langshanIndex.vue"; // 2. 定義路由配置 const routes = [ { path: "/", redirect: '/countIndex' }, { path: "/countIndex", component: countIndex }, { path: "/langshanIndex", component: langshanIndex }, ]; // 3. 創(chuàng)建路由實(shí)例 const router = createRouter({ // 4. 采用hash 模式 history: createWebHashHistory(), // 采用 history 模式 // history: createWebHistory(), routes, //使用上方定義的路由配置 }); export default router //導(dǎo)出router
Router 當(dāng)做插件引用進(jìn)來(lái)——main.js
import { createApp } from 'vue' import routerIndex from './router/routerIndex' // 引入路由對(duì)象實(shí)例 import App from './App.vue' const app = createApp(App) // 使用配置的路由 app.use(routerIndex) app.mount('#app')
感謝各位的閱讀,以上就是“vue3怎么使用vue-router及路由權(quán)限攔截”的內(nèi)容了,經(jīng)過(guò)本文的學(xué)習(xí)后,相信大家對(duì)vue3怎么使用vue-router及路由權(quán)限攔截這一問(wèn)題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。