《Vue.js3Web开发案例教程（在线实训版）》 课件 13 路由Vue Router.pptx

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=123router.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