Vue Router深入学习(二)

最新推荐文章于 2024-05-09 20:06:28 发布
最新推荐文章于 2024-05-09 20:06:28 发布
阅读量2.5k 收藏 13
点赞数 2
分类专栏： Vue 文章标签： vue.js javascript Vue3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chilanzi/article/details/123505931
版权

Vue Router深入学习(二)

通过阅读文档，自己写一些demo来加深自己的理解。(主要针对Vue3)
上一篇：Vue Router深入学习(一)

1. 路由元信息

有时，你可能希望将任意信息附加到路由上，如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta属性来实现，并且它可以在路由地址和导航守卫上都被访问到。定义路由的时候你可以这样配置 meta 字段

语法：

const routes = [
  {
    path: '/user',
    component: () => import('../components/User.vue'),
    meta: {
      tag: '用户',
      isLogin: true
    }
  }
];

1.1 简单使用

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/user',
    component: () => import('../components/User.vue'),
    meta: {
      tag: '用户',
      isLogin: true
    }
  }
];

export default new createRouter({
  history: createWebHistory(),
  routes
});


<template>
  <h2>User</h2>
  <p>{{ route.meta }}</p>
</template>

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
console.log(route.meta)
</script>

<style>
</style>

image-20220304103855475

1.2 搭配路由守卫使用

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/user',
    component: () => import('../components/User.vue'),
    meta: {
      tag: '用户',
      isLogin: true
    },
    children: [
      {
        path: ':id(\\d+)',
        component: () => import('../components/UserId.vue'),
        meta: {
          type: 'id',
          requireAuth: true
        }
      },
      {
        path: ':name',
        component: () => import('../components/UserName.vue'),
        meta: {
          type: 'name',
          requireAuth: false
        }
      }
    ]
  }
];

export default new createRouter({
  history: createWebHistory(),
  routes
});

路由前置守卫

router.beforeEach((to, from) => {
  if (to.meta.requireAuth) {
    return {
      path: '/user',
      query: {
        redirect: to.path   // 保存要去的位置，获得权限后再去
      }
    }
  }
})

vue-router

2. 数据获取

有时候，进入某个路由后，需要从服务器获取数据。例如，在渲染用户信息时，你需要从服务器获取用户的数据。

2.1 导航完成后获取数据

当你使用这种方式时，我们会马上导航和渲染组件，然后在组件的 created 钩子中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。

<template>
  <div class="content">
    <p>id: {{ post.id }}</p>
  </div>
  <span>
    <router-link :to="{ name: 'Post', params: { id: 222 } }">222</router-link>
  </span>
  <span>
    <router-link :to="{ name: 'Post', params: { id: 333 } }">333</router-link>
  </span>
  <span>
    <router-link :to="{ name: 'Post', params: { id: 444 } }">444</router-link>
  </span>
</template>

<script setup>
import { reactive, watchEffect } from 'vue'
import { useRoute } from 'vue-router'

let post = reactive({
  id: null
})
const route = useRoute()

const fetchData = () => {   // 数据获取，不需要生命周期钩子。因为beforeCreate和created没有API，因为setup实际上就相当于这两个生命周期函数
  post.id = route.params.id
}

watchEffect(() => {
  const id = post.id
  fetchData()
})

</script>

<style scoped>
span {
  margin: 0 5px;
}
</style>

vue-router

2.2 在导航完成前获取数据

通过这种方式，我们在导航转入新的路由前获取数据。我们可以在接下来的组件的 beforeRouteEnter 守卫中获取数据，当数据获取成功后只调用 next 方法

<template>
  <div class="content">
    <p>id: {{ post.id }}</p>
  </div>
  <span>
    <router-link :to="{ name: 'Post', params: { id: 222 } }">222</router-link>
  </span>
  <span>
    <router-link :to="{ name: 'Post', params: { id: 333 } }">333</router-link>
  </span>
  <span>
    <router-link :to="{ name: 'Post', params: { id: 444 } }">444</router-link>
  </span>
</template>

<script>
export default {
  data() {
    return {
      post: {}
    }
  },
  beforeRouteEnter(to, from, next) {    // 不要写在setup里
    next(vm => {
      vm.setData(to.params)
    })
  },
  beforeRouteUpdate(to, from) {
    this.post = to.params
  },
  methods: {
    setData(post) {
      this.post = post
    }
  }
}
</script>

<style scoped>
span {
  margin: 0 5px;
}
</style>

效果和上图一样。这里有点问题，通过beforeRouteEnter无法获取到setup里的函数、数据等，所以变成了使用Vue2的形式来实现。

3. 过渡动效

3.1 transition简单了解

<Transition> 会在一个元素或组件进入和离开 DOM 时应用动画

image-20220304182013408

3.2 简单使用

<router-view v-slot="{ Component }">
  <transition name="fade">
    <component :is="Component"></component>
  </transition>
</router-view>

在router-view上使用v-slot获取对应的组件，使用component动态组件来渲染这个组件，然后用transition包裹住这个动态组件

对应的路由组件只能有一个根元素，否则过渡将没有效果

.fade-enter-from,
.fade-leave-to {
  transform: translateX(-100px);
  opacity: 0;
}

.fade-enter-active {
  transition: all 1s;
}

效果：

vue-router

代码部分
<template>
  <router-view v-slot="{ Component }">
    <transition name="fade">
      <component :is="Component"></component>
    </transition>
  </router-view>
</template>

<script setup>

</script>

<style>
.fade-enter-from,
.fade-leave-to {
  transform: translateX(-100px);
  opacity: 0;
}

.fade-enter-active {
  transition: all 1s;
}
</style>

3.3 单个路由的过渡

原理很简单，路由配置时在meta上添加上trasition属性，再动态地和name结合在一起就行

const routes = [
  {
    path: '/',
    component: () => import('../components/Home.vue'),
  },
  {
    path: '/post',
    name: 'Post',
    component: () => import('../components/Post.vue'),
    meta: {
      transition: 'slide-left'
    }
  },
  {
    path: '/user',
    name: 'User',
    component: () => import('../components/User.vue'),
    meta: {
      transition: 'slide-right'
    }
  }
];

<router-view v-slot="{ Component, route }">
  <transition :name="route.meta.transition || fade">
    <component :is="Component"></component>
  </transition>
</router-view>

再添加上对应的css样式

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.slide-left-enter-active,
.slide-right-enter-active {
  transition: all 1s;
}

.slide-left-enter-from,
.slide-left-leave-to {
  transform: translateX(-200px);
}

.slide-right-enter-from,
.slide-right-leave-to {
  transform: translateX(200px);
}

3.4 基于路由的动态过渡

根据目标路由和当前路由之间的关系，动态地确定使用的过渡

如：添加一个 全局后置钩子，根据路径的深度动态添加信息到 meta 字段

router.afterEach((to, from) => {
  const toDepth = to.path.split('/').length
  const fromDepth = from.path.split('/').length

  to.meta.transition = toDepth < fromDepth ? 'slide-right' : 'slide-left'
})

vue-router

4. 滚动行为

在创建Router示例时，提供一个scrollBehavior方法

const router = createRouter({
  history: createWebHashHistory(),
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})

4.1 普通用法

const router = new createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    return {
      top: 50   // 始终滚动到距离顶部50px处
    }
  }
});

vue-router1

如果浏览器支持滚动行为，可以通过behavior变得更流畅

const router = new createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    return {
      top: 50,   // 始终滚动到距离顶部50px处
      behavior: 'smooth',
    }
  }
});

vue-router1

4.2 通过el实现相对元素的偏移

el可接受一个CSS选择器或一个DOM元素

const router = new createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    return {
      el: 'h2',
      top: 50
    }
  }
});

vue-router1

4.3 恢复之前的位置

返回 savedPosition，在按下 后退/前进 按钮时，就会恢复之前的位置。像浏览器的原生表现那样

const router = new createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      // console.log(savedPosition)
      return savedPosition
    } else {
      return {
        top: 0
      }
    }
  }
});

vue-router1

4.4 延迟滚动

通过返回一个Promise来实现。

const router = new createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({
          top: 0,
          behavior: 'smooth'
        })
      }, 500)
    })
  }
});

vue-router1

5. 路由懒加载

把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，会更高效

静态导入：

import User from '../components/User.vue'

const routes = [
  {
    path: '/user',
    name: 'User',
    component: User
  }
];

动态导入：(实际上还省字)

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/user',
    name: 'User',
    component: () => import('../components/User.vue')
  }
];

6. 动态路由

6.1 添加路由

路由配置：初始只有一个路由

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    component: () => import('../components/Home.vue')
  }
];


const router = new createRouter({
  history: createWebHistory(),
  routes
});


export default router;

在导航守卫处添加新路由：实际上要限制那些页面的权限就可以这样添加，只有满足条件才会动态添加路由

router.beforeEach((to, from) => {
  router.addRoute({
    path: '/user',
    name: 'User',
    component: () => import('./components/User.vue')
  })
})

6.2 删除路由

当路由被删除时，所有的别名和子路由都会被同时删掉

6.2.1 通过添加一个名字冲突的路由

如果添加与现有名称相同的路由，会先删除路由，再添加路由。

router.addRoute({ path: '/about', name: 'about', component: About })
// 这将会删除之前已经添加的路由，因为他们具有相同的名字且名字必须是唯一的
router.addRoute({ path: '/other', name: 'about', component: Other })
6.2.2 通过调用 router.addRoute() 返回的回调

情境：路由没有名称，没法覆盖删除掉路由

const removeRoute = router.addRoute(routeRecord)
removeRoute() // 删除路由如果存在的话
6.2.3 通过使用 router.removeRoute() 按名称删除路由
router.addRoute({ path: '/about', name: 'about', component: About })
// 删除路由
router.removeRoute('about')

6.3 添加嵌套路由

router.addRoute({
  name: 'admin',
  path: '/admin',
  component: Admin,
  children: [{ path: 'settings', component: AdminSettings }],
})

也可以将路由的name作为第一个参数传递给router.addRoute()，这样就可以有效的添加路由

router.addRoute({ name: 'admin', path: '/admin', component: Admin })
router.addRoute('admin', { path: 'settings', component: AdminSettings })

6.4 查看现有路由

赤蓝紫
关注
  • 2
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【vue-router源码】二、createWebHistory、createWebHashHistory、createMemoryHistory源码解析
MAXLZ的博客
06-05 1万+
【vue-router源码】系列文章将带你从0开始了解vue-router的具体实现。
phpstudy+TP5隐藏入口文件
qq_33407279的博客
07-28 349
apach <IfModule mod_rewrite.c> Options +FollowSymlinks -Multiviews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^(.*)$ index.php?/$1 [QSA,PT,L] </IfModule> 打开 httpd.conf 配置文.
VueRouter4 路由语法解析
最新发布
m0_63055116的博客
05-09 442
2. 导入createWebHistory ，配置 history 模式，地址栏不带#。（ 配置hash模式用 createHashHistory， 地址栏带# ）import.meta.env.BASE_URL 是 vite.config.js中的 base 配置项。1 .导入createRouter，创建路由实例。如果写成点击触发一个函数，在函数中要这样写。如果不设置或者设置为'/' ,就是这样。routes 和 vue2 一样。然后在浏览器的地址栏就会显示。在模板中点击跳转，和vue2一样。
vue3的vue-router中的creatWebHistory()方法有什么作用
Frank_colo的博客
06-05 1224
vue3的vue-router的createwebhistory方法的作用是用h5的history方法创建路由模式，并且这个方法传递的参数就是根路径。注意：在router.ts文件中要导出一个方法，这个方法会返回createRouter函数。在main.ts中导入这个方法，然后调用。
Vue3路由配置createRouter、createWebHistory、useRouter,useRoute
看见小狮子没
09-22 1万+
Vue3和Vue2基本差不多，只不过需要将、从中引入，再进行使用。
vue-router 学习快速入门
08-31
Vue Router 是 Vue.js 应用程序中的官方路由库，它负责管理应用程序的导航和页面间的交互。本篇文章将带你快速入门 ...通过本文的快速入门，你应该对 Vue Router 有了初步的认识，为进一步深入学习和应用奠定了基础。
vue router学习之动态路由和嵌套路由详解
08-29
在本文中，我们将深入探讨 Vue Router 的两个关键特性：动态路由和嵌套路由。 首先，动态路由（Dynamic Routing）允许我们在路由路径中使用占位符，以便根据不同的参数值加载不同的组件。在提供的示例中，我们看到 ...
vue学习之Vue-Router用法实例分析
10-15
3. **创建和使用router实例**：然后，我们通过传递`routes`数组来创建一个新的VueRouter实例，并将其挂载到Vue的根实例上，这样Vue就知道如何处理页面导航。 ```javascript const router = new VueRouter({ routes ...
Vue Router的手写实现方法实现
10-15
在本文中，我们将深入探讨Vue Router的实现原理，以及为何需要前端路由，特别是两种常见的路由模式：Hash 路由模式和History 路由模式。 首先，前端路由在SPA中的作用至关重要，因为它允许我们在不刷新整个页面的...
Vue Router中应用中间件的方法
10-14
这篇内容将深入探讨如何在Vue Router中应用中间件，以及它们的用途。 首先，理解中间件的基本概念非常重要。中间件是一种函数，它可以在请求处理链中插入额外的逻辑，允许在执行下一步操作之前进行检查、修改请求...
Vue Router 开启history模式（去#）踩坑记录
叼辣条闯天涯
03-19 3525
我的正确代码 路由版本：^4.0.0-0 可能我的路由版本比较高，找了半天网上的修改方案，都不对，包括路由官网的都不对。 然后我就重新建了一个项目，在建项目的时候直接勾选使用history模式，新建之后才发现是下边这个样子： import {createRouter, createWebHistory} from 'vue-router' import Home from '../components/home.vue' import Index from '../components/Logged/ind
15. vue引入路由配置
快乐的大大大飞猪
09-17 709
在Vue中，我们可以通过vue-router路由管理页面之间的关系Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。
如何使用 Vue 路由器
allway2的博客
02-15 1676
现代单页 Web 应用程序 (SPA) 最强大的功能之一是路由。现代单页应用程序（例如 Vue 应用程序）可以在客户端从一个页面转换到另一个页面（无需请求服务器）。Vue Router是 Vue 应用中页面导航的官方库。Vue Router 使用简单，但功能强大。在本文中，我们将深入探讨Vue Router 4（与 Vue 3 一起使用）。我们将介绍您需要了解的所有内容，以舒适地使用 Vue Router。 我们将涵盖： Vue 路由器基础知识 动态路由 如何传递路由器参数 延迟加载 无论您是
vue3 配置路由
悟世君子的博客
06-10 1万+
使用 vue3 配置路由，步骤如下 1、安装路由 npm install vue-router@4
Vue 路由（Router）详细介绍（切换，传参，通信）
高大志leo的博客
12-09 1万+
在一个vue项目中，免不了对组件（页面）进行切换与跳转。而用 Vue.js + Vue Router 创建单页应用，感觉很自然：使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。 话不多说，直接开始！！！ 准备工作 在使用脚手架vue-cli3创建（vue create projectName）一个vue项目时，
Vue3的vue-router超详细使用
热门推荐
qq_52769059的博客
09-08 1万+
Vue3的vue-router超详细使用
vue-router的进阶学习——vue路由的封装和配置
人间草木
01-29 3410
第一步： 1.在vue项目里 src/router/ 文件夹下 新建 config.js 文件，写入如下代码：   const base = '/' const routers = [ { name: '用户管理', child: [ { name: '用户管理列表', url: '/user/index' } ...
vue理由设置_Vue路由模块化配置的完整步骤
weixin_39788960的博客
01-13 385
前言企业运营后台页面很多，路由如若不区分模块化配置，所有路由挤在同一个文件将不好维护，所以路由的配置也要模块化分享两个解决方案 —— Vue 路由配置的模块化(Plan A and Plan B)注册需要首先路由注册需要啥// main.jsnew Vue({el: '#app',router,store,components: { App },template: ''})// 这里的 route...
vue router component
07-27
Vue Router 是 Vue.js 官方的路由管理器，它允许你在 Vue 应用中实现页面之间的导航。在 Vue Router 中，一个路由对应着一...你可以参考 Vue Router 的官方文档来深入学习和了解更多信息：https://router.vuejs.org/zh/

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值