前端Vue日常工作中--Vue路由相关

狐说狐有理2024-01-03 8:30

前端Vue日常工作中--Vue路由相关

文章目录

1.路由模式

Vue 路由模式主要有两种：哈希模式（Hash Mode）和历史模式（History Mode）。

  1. 哈希模式（Hash Mode）：

    在哈希模式下，URL 中的路径会以 # 符号开头，在这种模式下，实际的路径是在 # 符号之后，而不会触发浏览器向服务器发送请求。这样可以避免浏览器刷新页面时发送请求，适用于单页应用。

    在 Vue 中，默认就是哈希模式，你不需要额外的配置，只需创建一个路由实例即可：

    javascript 复制代码 
    import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'hash', // 默认就是 'hash' 模式
  routes: [
    // 路由配置
  ]
});

  2. 历史模式（History Mode）：

    在历史模式下，URL 中的路径更具传统的形式，不再带有 # 符号，在这种模式下，需要服务器的支持，以确保在直接访问或刷新页面时能够正确处理路由。

    若要使用历史模式，需要配置 mode 为 'history'，并在服务器端进行相关设置。以下是一个基本的配置示例：

    javascript 复制代码 
    import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history', // 使用 'history' 模式
  routes: [
    // 路由配置
  ]
});

在 Element UI，可以在项目中使用 Element UI 的导航组件如 <el-menu> 和 <el-menu-item>，并根据不同的路由模式进行相应的配置。例如，可以在菜单项中使用 <router-link> 组件来实现导航：

html 复制代码 
<template>
  <el-menu :default-active="activeMenu" mode="horizontal" @select="handleMenuSelect">
    <el-menu-item index="/home">
      <router-link to="/home">Home</router-link>
    </el-menu-item>
    <el-menu-item index="/about">
      <router-link to="/about">About</router-link>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeMenu: '' // 用于记录当前激活的菜单项
    };
  },
  methods: {
    handleMenuSelect(index) {
      this.activeMenu = index;
    }
  }
}
</script>

<router-link> 组件被用于创建带有正确路由的链接，这样用户点击菜单项时就会触发路由切换。在实际项目中，可以根据具体需求配置路由模式，并使用 Element UI 或其他 UI 库提供的组件来构建用户界面。

2.router和$route

$router 和 $route 是与路由相关的两个对象，它们分别代表了路由器和当前路由的信息。主要区别如下：

  1. $router：

    • $router 是 Vue 路由器的实例，提供了一系列导航方法，如 push、replace 和 go，用于在应用程序中进行路由导航。
    • $router 允许你通过编程的方式进行路由跳转，而不依赖于声明式的组件内部导航（例如 <router-link>）。
    • 可以在任何组件中通过 this.$router 访问。

  2. $route：

    • $route 是当前活动的路由对象，包含了当前路由的信息，如路径、参数、查询参数、哈希等。
    • $route 可以用于访问当前路由的各种信息，例如在组件内获取当前路径 this.$route.path，或者获取查询参数 this.$route.query。
    • $route 是一个响应式对象，当路由发生变化时，相关组件会自动更新。
html 复制代码 
<template>
  <div>
    <p>当前: {{ $route.path }}</p>
    <p>查询参数: {{ $route.query }}</p>

    <el-button @click="goToAbout">Go to About</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    goToAbout() {
      // 使用 $router 进行编程式导航
      this.$router.push('/about');
    }
  }
}
</script>

$route.path 用于获取当前路由的路径，$route.query 用于获取查询参数。$router.push('/about') 使用 $router 对象进行编程式导航，将用户导航到 "/about" 路由。

3.路由跳转

在 Vue 中，常见的路由跳转方式包括：

  1. 声明式导航（Declarative Routing）：

    使用 <router-link> 组件进行声明式的导航，该组件会自动渲染为合适的 <a> 标签，通过 to 属性指定目标路由。

    html 复制代码 
    <template>
  <router-link to="/home">Go to Home</router-link>
</template>

  2. 编程式导航（Programmatic Routing）：

    使用 $router 对象进行编程式导航，通常在组件内部的方法中执行。在这里，可以使用 this.$router.push() 来导航到目标路由。

    html 复制代码 
    <script>
export default {
  methods: {
    goToHome() {
      this.$router.push('/home');
    }
  }
}
</script>
html 复制代码 
<template>
  <div>
    <!-- 声明式导航 -->
    <router-link to="/home">
      <el-button type="primary">Go to Home</el-button>
    </router-link>

    <!-- 编程式导航 -->
    <el-button type="success" @click="goToAbout">Go to About</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    goToAbout() {
      // 使用编程式导航
      this.$router.push('/about');
    }
  }
}
</script>

我们使用了 Element UI 的按钮组件来触发路由的跳转。<router-link> 用于声明式导航，而 this.$router.push() 用于编程式导航。

4.路由守卫

Vue 路由守卫用于在导航过程中对路由进行控制，可以在路由跳转前、跳转后、组件渲染前等不同阶段执行一些代码逻辑。Vue 提供了全局守卫、路由独享守卫、组件内守卫等多种类型的守卫。

  1. 全局前置守卫 (beforeEach)：

    在路由跳转前执行，常用于进行权限验证或全局设置。

    javascript 复制代码 
    import router from './router';

router.beforeEach((to, from, next) => {
  // 在此处进行权限验证或其他逻辑
  if (to.meta.requiresAuth && !isAuthenticated) {
    // 未登录，重定向到登录页
    next('/login');
  } else {
    // 继续路由跳转
    next();
  }
});

  2. 全局解析守卫 (beforeResolve)：

    在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后调用。

    javascript 复制代码 
    router.beforeResolve((to, from, next) => {
  // 在此处执行解析逻辑
  next();
});

  3. 全局后置守卫 (afterEach)：

    在路由跳转后执行，常用于记录日志或进行页面埋点等操作。

    javascript 复制代码 
    router.afterEach((to, from) => {
  // 在此处执行后置逻辑
});

  4. 路由独享守卫 (beforeEnter)：

    在单个路由配置中定义，对特定路由生效。

    javascript 复制代码 
    const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      beforeEnter: (to, from, next) => {
        // 在此处执行路由独享守卫逻辑
        if (isAdmin) {
          next();
        } else {
          next('/login');
        }
      }
    }
  ]
});

  5. 组件内守卫：

    在组件内部定义 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 方法。

    javascript 复制代码 
    export default {
  beforeRouteEnter(to, from, next) {
    // 在组件渲染前执行
    next(vm => {
      // 可以访问实例 `vm`
    });
  },
  beforeRouteUpdate(to, from, next) {
    // 在组件复用时调用
    // 可以访问组件实例 `this`
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 在组件离开时调用
    // 可以访问组件实例 `this`
    next();
  }
};
javascript 复制代码 
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    // 使用 Element UI 的消息框提示用户
    this.$message.error('请先登录');
    // 未登录，重定向到登录页
    next('/login');
  } else {
    // 继续路由跳转
    next();
  }
});

5.路由传参

  1. 路由参数：

    通过在路由路径中添加参数，可以使用$route.params来访问这些参数。

    javascript 复制代码 
    // 路由配置
const routes = [
  { path: '/user/:id', component: User }
];

// 组件中获取参数
this.$route.params.id

    Element UI：

    html 复制代码 
    <!-- 使用el-link传递参数 -->
<el-link :to="{ path: '/user/' + userId }">Go to User</el-link>

  2. 查询参数：

    使用查询参数，可以通过$route.query来获取。

    javascript 复制代码 
    // 路由配置
const routes = [
  { path: '/user', component: User }
];

// 组件中获取参数
this.$route.query.id

    Element UI：

    html 复制代码 
    <!-- 使用el-link传递查询参数 -->
<el-link :to="{ path: '/user', query: { id: userId }}">Go to User</el-link>

  3. 命名路由：

    使用命名路由，可以在$route.params中直接获取。

    javascript 复制代码 
    // 路由配置
const routes = [
  { path: '/user/:id', name: 'user', component: User }
];

// 组件中获取参数
this.$route.params.id

    Element UI：

    html 复制代码 
    <!-- 使用el-link传递参数 -->
<el-link :to="{ name: 'user', params: { id: userId }}">Go to User</el-link>

  4. props传参：

    可以通过在路由配置中使用props来直接将参数传递给组件。

    javascript 复制代码 
    // 路由配置
const routes = [
  { path: '/user/:id', component: User, props: true }
];

// 组件中通过props接收参数
props: ['id']

    Element UI：

    html 复制代码 
    <!-- 使用el-link传递参数 -->
<el-link :to="{ path: '/user/' + userId, props: true }">Go to User</el-link>

6.问题：Vue路由解决页面刷新参数丢失的问题

当在Vue应用中刷新页面时，页面的状态和参数通常会丢失，这是因为刷新页面会重新加载整个应用，导致 Vue 实例重新创建。

  1. 使用路由参数：

    将页面状态信息放在路由的路径中，以便在刷新页面时能够重新获取。这样，即使刷新页面，路由参数仍然会被保留。

    javascript 复制代码 
    // 路由配置
const routes = [
  { path: '/user/:id', component: User }
];

// 在组件中获取参数
this.$route.params.id

    Element UI 的 el-link

    html 复制代码 
    <!-- 使用el-link传递参数 -->
<el-link :to="{ path: '/user/' + userId }">Go to User</el-link>

  2. 使用localStorage或sessionStorage：

    将页面状态信息存储在 localStorage 或 sessionStorage 中，以便在页面刷新时检索。

    javascript 复制代码 
    // 存储数据
localStorage.setItem('userId', userId);

// 获取数据
const userId = localStorage.getItem('userId');

    在 Vue 组件的生命周期钩子中使用：

    javascript 复制代码 
    mounted() {
  const userId = localStorage.getItem('userId');
  // 使用 userId 进行其他操作
}

    使用 localStorage 或 sessionStorage 存储的数据在页面关闭后仍然存在，需要手动清除或者通过其他方式进行管理。

  3. 使用Vuex：

    如果应用状态较为复杂，可以使用 Vuex 来管理全局状态。即使页面刷新，Vuex 中的状态仍然可以被保留。

    javascript 复制代码 
    // 在 Vuex store 中定义状态
state: {
  userId: null
}

// 在组件中获取状态
this.$store.state.userId

    在页面刷新后，你需要通过触发某个事件或在应用初始化时从其他地方恢复这些状态。

相关推荐
小马哥编程1 小时前
Function.prototype和Object.prototype 的区别
javascript
小白学前端6661 小时前
React Router 深入指南：从入门到进阶
前端·react.js·react
苹果醋31 小时前
React系列（八）——React进阶知识点拓展
运维·vue.js·spring boot·nginx·课程设计
web130933203981 小时前
前端下载后端文件流，文件可以下载，但是打不开，显示“文件已损坏”的问题分析与解决方案
前端
王小王和他的小伙伴1 小时前
解决 vue3 中 echarts图表在el-dialog中显示问题
javascript·vue.js·echarts
学前端的小朱1 小时前
处理字体图标、js、html及其他资源
开发语言·javascript·webpack·html·打包工具
outstanding木槿1 小时前
react+antd的Table组件编辑单元格
前端·javascript·react.js·前端框架
好名字08212 小时前
前端取Content-Disposition中的filename字段与解码(vue)
前端·javascript·vue.js·前端框架
摇光932 小时前
js高阶-async与事件循环
开发语言·javascript·事件循环·宏任务·微任务
隐形喷火龙2 小时前
element ui--下拉根据拼音首字母过滤
前端·vue.js·ui
热门推荐
0119个Web前端交互式3D JavaScript框架和库02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10大模型国产化适配7-华为昇腾LLM落地可选解决方案（MindFormers、ModelLink、MindIE）