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