前端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

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

相关推荐
你挚爱的强哥27 分钟前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森1 小时前
CSS3中的伸缩盒模型（弹性盒子、弹性布局）之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy1 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189111 小时前
vue3中父div设置display flex，2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏（补充上一条）
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
天天进步20153 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz4 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇4 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒4 小时前
如何在Vue项目中应用TypeScript？应该注意那些点？
前端·vue.js·typescript
热门推荐
01ICLR24大模型提示(1/11) | BadChain：大型语言模型的后门思维链提示02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04【音视频 | opus】opus编解码库(opus-1.4)详细介绍以及使用——附带解码示例代码05Coze扣子平台完整体验和实践（附国内和国际版对比）06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07IT专业入门，高考假期预习指南08玄机平台应急响应—webshell查杀09RAG 实践- Ollama+RagFlow 部署本地知识库10〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇