柚子快報(bào)邀請(qǐng)碼778899分享：vue.js vue2——路由
柚子快報(bào)邀請(qǐng)碼778899分享：vue.js vue2——路由
Vue2—路由
一、路由1.基本使用2. 幾個(gè)注意點(diǎn)3. 多級(jí)路由（多級(jí)路由）4. 路由的query參數(shù)5.命名路由6. 路由的params參數(shù)7.路由的props配置8. ```
二、Vue項(xiàng)目部署三、常用UI組件庫(kù)1. 移動(dòng)端常用 UI 組件庫(kù)2. PC 端常用 UI 組件庫(kù)
一、路由
理解： 一個(gè)路由（route）就是一組映射關(guān)系（key - value），多個(gè)路由需要路由器（router）進(jìn)行管理。前端路由：key是路徑，value是組件。
1.基本使用
安裝vue-router，命令：npm i vue-router 應(yīng)用插件：Vue.use(VueRouter)
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
// 引入路由器
import router from "./router"
Vue.use(VueRouter)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router: router
}).$mount('#app')
在src/router/index.js中編寫router配置項(xiàng): //引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 組件
import About from '../components/About'
import Home from '../components/Home'
//創(chuàng)建router實(shí)例對(duì)象，去管理一組一組的路由規(guī)則
const router = new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
}
]
})
//暴露router
export default router
實(shí)現(xiàn)切換（active-class可配置高亮樣式）
指定展示位置
2. 幾個(gè)注意點(diǎn)
路由組件通常存放在pages文件夾，一般組件通常存放在components文件夾。通過切換，“隱藏”了的路由組件，默認(rèn)是被銷毀掉的，需要的時(shí)候再去掛載。每個(gè)組件都有自己的$route屬性，里面存儲(chǔ)著自己的路由信息。整個(gè)應(yīng)用只有一個(gè)router，可以通過組件的$router屬性獲取到。
3. 多級(jí)路由（多級(jí)路由）
配置路由規(guī)則，使用children配置項(xiàng)： routes:[
{
path:'/about',
component:About,
},
{
path:'/home',
component:Home,
children:[ //通過children配置子級(jí)路由
{
path:'news', //此處一定不要寫：/news
component:News
},
{
path:'message',//此處一定不要寫：/message
component:Message
}
]
}
]
跳轉(zhuǎn)（要寫完整路徑）：
4. 路由的query參數(shù)
傳遞參數(shù)
:to="{ path:'/home/message/detail', query:{ id:666, title:'你好' } }" >跳轉(zhuǎn) 接收參數(shù)： $route.query.id $route.query.title 5.命名路由 作用：可以簡(jiǎn)化路由的跳轉(zhuǎn)。 如何使用 給路由命名： { path:'/demo', component:Demo, children:[ { path:'test', component:Test, children:[ { name:'hello' //給路由命名 path:'welcome', component:Hello, } ] } ] } 簡(jiǎn)化跳轉(zhuǎn)： :to="{ name:'hello', query:{ id:666, title:'你好' } }" >跳轉(zhuǎn) 6. 路由的params參數(shù) 配置路由，聲明接收params參數(shù) { path:'/home', component:Home, children:[ { path:'news', component:News }, { component:Message, children:[ { name:'xiangqing', path:'detail/:id/:title', //使用占位符聲明接收params參數(shù) component:Detail } ] } ] } 傳遞參數(shù) :to="{ name:'xiangqing', params:{ id:666, title:'你好' } }" >跳轉(zhuǎn) 特別注意：路由攜帶params參數(shù)時(shí)，若使用to的對(duì)象寫法，則不能使用path配置項(xiàng)，必須使用name配置！ 接收參數(shù)： $route.params.id $route.params.title 7.路由的props配置 ? 作用：讓路由組件更方便的收到參數(shù) { name:'xiangqing', path:'detail/:id', component:Detail, //第一種寫法：props值為對(duì)象，該對(duì)象中所有的key-value的組合最終都會(huì)通過props傳給Detail組件 props:{a:900} //第二種寫法：props值為布爾值，布爾值為true，則把路由收到的所有params參數(shù)通過props傳給Detail組件 props:true //第三種寫法：props值為函數(shù)，該函數(shù)返回的對(duì)象中每一組key-value都會(huì)通過props傳給Detail組件 props($route){ return { id:$route.query.id, title:$route.query.title } } // 簡(jiǎn)化寫法 props({ query:{id,title} }) { return { id, title } } } 接受propos參數(shù) 8. 作用：控制路由跳轉(zhuǎn)時(shí)操作瀏覽器歷史記錄的模式瀏覽器的歷史記錄有兩種寫入方式：分別為push和replace，push是追加歷史記錄，replace是替換當(dāng)前記錄。路由跳轉(zhuǎn)時(shí)候默認(rèn)為push如何開啟replace模式： 9.編程式路由導(dǎo)航 作用：不借助 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)也可后退 10. 緩存路由組件 作用：讓不展示的路由組件保持掛載，不被銷毀。(組件不展示就會(huì)被銷毀) 具體編碼： include=“name”,name指的是組件名 11. 兩個(gè)新的生命周期鉤子 作用：路由組件所獨(dú)有的兩個(gè)鉤子，用于捕獲路由組件的激活狀態(tài)。具體名字： activated路由組件被激活時(shí)觸發(fā)。deactivated路由組件失活時(shí)觸發(fā)。 12. 路由守衛(wèi) 作用：對(duì)路由進(jìn)行權(quán)限控制 分類：全局守衛(wèi)、獨(dú)享守衛(wèi)、組件內(nèi)守衛(wèi) 全局守衛(wèi): const router = new VueRouter({ routes: [ { path: '/about', component: MyAbout, meta: { isAuth: false, title: "關(guān)于" } }, }) //全局前置守衛(wèi)：初始化時(shí)執(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') === 'beijing'){ //權(quán)限控制的具體規(guī)則 next() //放行 }else{ alert('暫無(wú)權(quán)限查看') // next({name:'guanyu'}) } }else{ next() //放行 } }) //全局后置守衛(wèi)：初始化時(shí)執(zhí)行、每次路由切換后執(zhí)行 router.afterEach((to,from)=>{ console.log('afterEach',to,from) if(to.meta.title){ document.title = to.meta.title //修改網(wǎng)頁(yè)的title }else{ document.title = 'vue_test' } }) 獨(dú)享守衛(wèi): beforeEnter(to,from,next){ console.log('beforeEnter',to,from) if(to.meta.isAuth){ //判斷當(dāng)前路由是否需要進(jìn)行權(quán)限控制 if(localStorage.getItem('school') === 'atguigu'){ next() }else{ alert('暫無(wú)權(quán)限查看') // next({name:'guanyu'}) } }else{ next() } } 組件內(nèi)守衛(wèi)： //進(jìn)入守衛(wèi)：通過路由規(guī)則，進(jìn)入該組件時(shí)被調(diào)用 beforeRouteEnter (to, from, next) { }, //離開守衛(wèi)：通過路由規(guī)則，離開該組件時(shí)被調(diào)用 beforeRouteLeave (to, from, next) { } 13. 路由器的兩種工作模式 對(duì)于一個(gè)url來說，什么是hash值？—— #及其后面的內(nèi)容就是hash值。hash值不會(huì)包含在 HTTP 請(qǐng)求中，即：hash值不會(huì)帶給服務(wù)器。hash模式： 地址中永遠(yuǎn)帶著#號(hào)，不美觀 。若以后將地址通過第三方手機(jī)app分享，若app校驗(yàn)嚴(yán)格，則地址會(huì)被標(biāo)記為不合法。兼容性較好。 history模式： 地址干凈，美觀 。兼容性和hash模式相比略差。應(yīng)用部署上線時(shí)需要后端人員支持，解決刷新頁(yè)面服務(wù)端404的問題。 二、Vue項(xiàng)目部署 打包npm run build,會(huì)生成dist文件夾 新建服務(wù)器 安裝express npm i express 新建 js 文件和 static 文件夾 const express = require("express") const app = express() app.use(express.static('static')) app.get('/person', (req, res) => { res.send( { name: 'zs', age: 18 } ) }) app.listen(5005, (err) => { if (!err) console.log("服務(wù)器啟動(dòng)成功！"); }) 把dist文件里面的內(nèi)容復(fù)制到static文件夾中 啟動(dòng)服務(wù)器 node test.js 三、常用UI組件庫(kù) 1. 移動(dòng)端常用 UI 組件庫(kù) Vant https://youzan.github.io/vantCube UI https://didi.github.io/cube-uiMint UI http://mint-ui.github.io 2. PC 端常用 UI 組件庫(kù) Element UI https://element.eleme.cnIView UI https://www.iviewui.com 柚子快報(bào)邀請(qǐng)碼778899分享：vue.js vue2——路由 推薦鏈接
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
Monotaro跨境工具購(gòu)
