vue.js

2024.7vue.js第13章

路由VueRouter基本用法命名路由：使用name屬性給路由命名DEMO路由動態匹配DEMO編程式導航重命名和別名進階用法——導航守衛DEMO進階用法——路由元信息DEMOhistory模式第13章

路由VueRouter

第13章

路由VueRouter基本用法安裝：npminstallvue-router命名路由：使用name屬性給路由命名

{path:'/',name:'Home',component:()=>import('../views/home.vue'),}第13章

路由VueRouterDEMO第13章

路由VueRouter路由動態匹配路由參數多路由參數與偵聽路由查詢參數捕獲所有路由模式匹配路徑$route.params/product/:id/product/1{id:1}/product/:page/:tag/product/1/0{page:1,tag:0}{path:'/:pathMatch(.*)*',name:'Page404',component:()=>import('../views/page404.vue')}第13章

路由VueRouterDEMO第13章

路由VueRouter編程式導航//字符串router.push('home')//對象router.push({path:'home'})//命名的路由router.push({name:'product',params:{id:'123'}})//帶查詢參數，變成/register?plan=privaterouter.push({path:'register',query:{plan:'private'}})constid='123'router.push({name:'product',params:{id}})//->/product/123router.push({path:`/product/${id}`})//->/product/123//這里的params不生效router.push({path:'/product',params:{id}})//->/product第13章

路由VueRouter重定向和別名重定向別名constroutes=[{path:'/a',redirect:'/b'},//字符串路徑{path:'/a',redirect:{name:'foo'}},//路徑對象{path:'/a',redirect:to=>{//接收目標路由作為參數//返回重定向的字符串路徑/路徑對象}}

]{path:'/product/:id',name:'ProductDetails',component:()=>import('../views/product-detail.vue'),

alias:'/product/details/:id'}第13章

路由VueRouter進階用法——導航守衛全局前置守衛：router.beforeEach(function(to,from,next){

//要執行的內容

})每個守衛方法接收三個參數：to:Route：即將要進入的路由from:Route：當前導航正要離開的路由next:Function：一定要調用該方法來resolve這個鉤子。執行效果依賴next方法的調用參數。next()next(false)next('/')或者next({path:'/'})next(error)路由中配置前置守衛：{path:'/product',name:'Product',component:Product,

beforeEnter:(to,from,next)=>{//...}}第13章

路由VueRouterDEMO第13章

路由VueRouter進階用法——路由元信息constroutes=[{path:'/product',name:'Product',component:()=>import('../views/product.vue'),

meta:{requireLogin:true//為true表示需要登錄才能訪問}},...省略...];第13章

路由VueRouterDEMO第13章

路由VueRouterhistory模式import{createRouter,createWebHistory}from'vue-router';constrouter=newVueRouter({

history:createWebHistory(),routes:[...]})hash模式history模式http://localhost:8080/#/producthttp://localhost:8080/product第13章

路由