《Vue 3基础入门》课件 第七章 vue-router.pptx

Vue路由

Contents目录路由的进阶使用0304导航守卫05路由元信息06过渡动效07数据捕获08路由懒加载09滚动行为10History模式路由基础01动态路由02

01路由基础PART

路由基础目前常见的前端路由方案主要有以下4种：hash模式基于锚点的原理实现，简单易用history模式使用HTML5标准中的HistoryAPI通过监听popstate事件来对DOM对象进行操作，每次路由变化不会引起重定向memory模式在内存中维护一个堆栈用于管理访问历史的方式，在早期移动端使用比较多，实现麻烦，问题也较多。ReactNative使用这种路由模式static模式主要用于服务端渲染（SSR），需要后端去管理路由。

在HTML中使用VueRouter在使用VueRouter时需要使用一个自定义组件router-link来创建链接。VueRouter可以在不重新加载页面的情况下更改URL、处理URL的生成及编码，router-view组件负责控制显示与URL对应的组件，可以将其放置在任何位置，以适应所需的布局scriptsrc=/vue-router@4/scriptdivid=apph1HelloApp!/h1p!--使用router-link组件来导航.--!--通过传入to属性指定链接.--!--router-link默认会被渲染成一个a标签--router-linkto=/fooGotoFoo/router-linkrouter-linkto=/barGotoBar/router-link/p!--路由出口--!--路由匹配到的组件将渲染在这里--router-view/router-view/div

在JavaScript代码中使用VueRouter在JavaScript中可以方便地使用VueRouter//0.如果使用模块化机制编程，导入Vue和VueRouter，要调用Vue.use(VueRouter)//1.定义(路由)组件。//可以从其他文件import进来constFoo={template:divfoo/div}constBar={template:divbar/div}//2.定义路由constroutes=[{path:/foo,component:Foo},{path:/bar,component:Bar}]//3.创建router实例，然后传routes配置constrouter=VueRouter.createRouter({history:VueRouter.createWebHashHistory(),routes//相当于routes:routes})//4.创建和挂载根实例constapp=Vue.createApp({//options}).use(router).$mount(#app)通过注入路由器可以在任何组件内使用路由器，通过this.$router访问路由器或者访问当前路由的信息//Home.vueexportdefault{computed:{username(){returnthis.$route.params.username}},methods:{goBack(){window.history.length1?this.$router.go(-1):this.$router.push(/)}}}

02动态路由PART

动态路由若需将所有匹配某种模式的路由都映射到同一个组件。对于所有id不相同的用户都用此组件来渲染，可以在VueRouter的路由路径中使用动态路径参数(dynamicsegment)来实现这一目标constUser={template:divUser/div}constrouter=VueRouter.createRouter({routes:[//动态路径参数以冒号开头{path:/user/:id,component:User}]})通过上述函数，用户在URL中输入路径/user/foo和/user/bar都将被映射到同一个路由，在VueRouter中，使用冒号“:”标记路径参数，在匹配到路由时，参数值会被设置到this.$route.para