vue-router
小满zs
我是真菜
展开
-
小满Router(第十二章-动态路由)
动态路由我们一般使用动态路由都是后台会返回一个路由表前端通过调接口拿到后处理(后端处理路由)主要使用的方法就是router.addRoute添加路由动态路由主要通过两个函数实现。router.addRoute()和router.removeRoute()。它们只注册一个新的路由,也就是说,如果新增加的路由与当前位置相匹配,就需要你用router.push()或router.replace()来手动导航,才能显示该新路由router.addRoute({ path: '/a...原创 2022-03-27 22:40:50 · 8814 阅读 · 9 评论 -
小满Router(第十一章-滚动行为)
滚动行为使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。vue-router 可以自定义路由切换时页面如何滚动。当创建一个 Router 实例,你可以提供一个 scrollBehavior 方法const router = createRouter({ history: createWebHistory(), scrollBehavior: (to, from, savePosition) => { console.log原创 2022-03-27 11:42:48 · 3180 阅读 · 7 评论 -
小满Router(第十章-路由过渡动效)
过渡动效想要在你的路径组件上使用转场,并对导航进行动画处理,你需要使用v-slot API: <router-view #default="{route,Component}"> <transition :enter-active-class="`animate__animated ${route.meta.transition}`"> <component :is="Component"></compon.原创 2022-03-27 00:57:48 · 4094 阅读 · 5 评论 -
小满Router(第九章-路由元信息)
路由元信息通过路由记录的 meta 属性可以定义路由的元信息。使用路由元信息可以在路由中附加自定义的数据,例如:权限校验标识。 路由组件的过渡名称。 路由组件持久化缓存 (keep-alive) 的相关配置。 标题名称我们可以在导航守卫或者是路由对象中访问路由的元信息数据。const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ {原创 2022-03-27 00:04:46 · 3969 阅读 · 0 评论 -
小满Router(第八章-导航守卫)
全局前置守卫router.beforeEachrouter.beforeEach((to, form, next) => { console.log(to, form); next()})每个守卫方法接收三个参数:原创 2022-03-26 00:28:16 · 7553 阅读 · 12 评论 -
小满Router(第七章-重定向-别名)
重定向redirect1. 字符串形式配置,访问/ 重定向到 /user (地址栏显示/,内容为/user路由的内容)const routes: Array<RouteRecordRaw> = [ { path:'/', component:()=> import('../components/root.vue'), redirect:'/user1', children:[ { .原创 2022-03-23 22:14:29 · 4483 阅读 · 3 评论 -
小满Router(第六章-命名视图)
命名视图可以在同一级(同一个组件)中展示更多的路由视图,而不是嵌套显示。 命名视图可以让一个组件中具有多个路由渲染出口,这对于一些特定的布局组件非常有用。 命名视图的概念非常类似于“具名插槽”,并且视图的默认名称也是 default。一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。确保正确使用components配置 (带上s)import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-route...原创 2022-03-22 20:53:44 · 4758 阅读 · 0 评论 -
小满Router(第五章-嵌套路由)
嵌套路由一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下,URL 的片段通常对应于特定的嵌套组件结构,例如:const routes: Array<RouteRecordRaw> = [ { path: "/user", component: () => import('../components/footer.vue'), children: [ { path原创 2022-03-20 19:02:14 · 6467 阅读 · 7 评论 -
小满Router(第四章-路由传参)
Query路由传参编程式导航 使用router push 或者 replace 的时候 改为对象形式新增query 必须传入一个对象const toDetail = (item: Item) => { router.push({ path: '/reg', query: item })}接受参数使用useRoute 的 queryimport { useRoute } from 'vue-router';const rout.原创 2022-03-20 16:10:42 · 9340 阅读 · 6 评论 -
小满Router(第三章-历史记录)
replace的使用采用replace进行页面的跳转会同样也会创建渲染新的Vue组件,但是在history中其不会重复保存记录,而是替换原有的vue组件;router-link 使用方法 <router-link replace to="/">Login</router-link> <router-link replace style="margin-left:10px" to="/reg">Reg</router-link>编程式原创 2022-03-19 11:15:32 · 5720 阅读 · 0 评论 -
小满Router(第二章-命名路由-编程式导航)
命名路由除了 path 之外,你还可以为任何路由提供 name。这有以下优点:没有硬编码的 URL params的自动编码/解码。 防止你在 url 中出现打字错误。 绕过路径排序(如显示一个)const routes:Array<RouteRecordRaw> = [ { path:"/", name:"Login", component:()=> import('../components/login.vue'.原创 2022-03-19 10:19:54 · 7991 阅读 · 0 评论 -
小满Router(第一章入门)
1,前言Vue 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue 可以实现多视图的单页Web应用2.安装构建前端项目npm init vue@latest//或者npm init vite@latest使用Vue3 安装对应的router4版本使用Vue2安装对应的router3版本npm install vue-router@4在src目录下面新建router 文件 然后在router 文件夹下面新建 index.ts//引入路由对象impor.原创 2022-03-18 22:30:32 · 13550 阅读 · 14 评论