vue-router详解

原文合集地址如下，有需要的朋友可以关注

本文地址

合集地址

Vue Router是Vue.js官方提供的用于构建单页面应用（SPA）的路由管理器。它允许你通过URL路径来管理应用程序的不同视图，并提供了导航功能、参数传递、路由守卫等特性。

下面结合示例来解释Vue Router的主要概念和用法。

1. 安装和配置：
   首先，你需要通过npm或yarn等包管理工具来安装Vue Router。安装完成后，在Vue应用的入口文件（通常是main.js）中导入Vue Router，并通过Vue.use()方法启用它。

• vue2这样配置
  在项目的src目录下，创建一个router文件夹，并在其中创建一个index.js文件（或者你可以自定义文件名）。

// src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/', component: Home },
  {
    path: '/about', component: About },
  // 其他路由配置
];

const router = new VueRouter({
   
  routes,
});

export default router;

然后在main.js里面引用

// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
   
  router,
  render: h => h(App),
}).$mount('#app');

• 基于vue3使用
  在项目的src目录下，创建一个router文件夹，并在其中创建一个index.js文件（或者你可以自定义文件名）。
  ```javascript
  // src/router/index.js
  import { createRouter, createWebHistory } from 'vue-router';
  import Home from '../views/Home.vue';
  import About from '../views/About.vue';

const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
// 其他路由配置
];

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

export default router;

在main.js文件引入

```javascript
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

1. 默认路径与重定向

• 默认路径：

  默认路径是指在用户访问应用程序时，如果没有匹配到任何已定义的路由路径，那么将跳转到默认路径。通过设置默认路径，你可以确保在没有匹配到特定路径时，用户会被导航到应用程序的默认页面。
  在Vue Router中，你可以通过在路由配置中定义一个名为redirect的属性来设置默认路径。示例代码如下：
  示例中，如果用户访问根路径'/'，将会被重定向到'/home'路径
  ```javascript
  const routes = [
  { path: '/', redirect: '/home' }, // 将默认路径重定向到 '/home'
  { path: '/home', component: Home },
  { path: '/about', component: About },
  // 其他路由配置
  ];

 - 重定向

重定向是指将用户从一个路由路径重定向到另一个路由路径。通过设置重定向，你可以实现在某些情况下，将用户自动导航到其他路径，以提供更好的用户体验或实现特定的逻辑。
在Vue Router中，你可以通过在路由配置中使用redirect属性来设置重定向。示例代码如下：
示例中，如果用户访问路径'/about'，将会被重定向到'/home'路径
```javascript
const routes = [
  { path: '/', redirect: '/home' }, // 将根路径重定向到 '/home'
  { path: '/home', component: Home },
  { path: '/about', redirect: '/home' }, // 将 '/about' 重定向到 '/home'
  // 其他路由配置
];

1. 路由视图：
   在Vue组件中，你可以使用<router-view>标签来渲染当前路由对应的组件。当URL发生变化时，Vue Router会根据路由配置自动切换和加载相应的组件。

<!-- App.vue -->
<template>
  <div>
    <router-view></router-view>
  </div>
</template>

1. 路由导航：
   可以使用<router-link>组件或编程式导航来实现路由的跳转。<router-link>是一个生成带有正确路径的链接的Vue组件。

<!-- 在模板中使用 <router-link> -->
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/contact">Contact</router-link>

// 在JavaScript代码中使用编程式导航
// 使用 $router 对象来访问导航功能
this.$router.push('/');
this.$router.replace('/about');
this.$router.go(-1); // 后退一步

1. 路由参数：
   可以通过路由参数来传递数据和实现动态路由。在路由配置中，使用冒号（:）来定义参数。

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

在组件中，你可以通过$route.params来获取路由参数。

// User.vue
export default {
   
  mounted() {
   
    const userId = this.$route.params.id;
    // 使用 userId 进行操作
  }
};

1. 路由守卫：
   Vue Router提供了一系列的路由守卫，用于在路由切换前后执行一些操作。例如，你可以在进入某个路由前验证用户的身份，或在离开某个路由前保存表单数据等。

// 路由独享的守卫
const routes = [
  {
    path: '/profile', component: Profile, beforeEnter: requireAuth }
];

function requireAuth(to, from, next) {
   
  // 在进入路由前进行身份验证
  if (isLoggedIn()) {
   
    next();
  } else {
   
    next('/login');
  }
}

// 全局前置守卫
router.beforeEach((to, from, next) => {
   
  // 执行一些操作，如身份验证
  next();
});

1. 历史模式
   vue-router有两种历史模式：hash 模式createWebHistory()和H5模式 createWebHashHistory()。
   分别是Vue Router中用于创建路由历史管理器的两个工厂函数，它们在路由模式和URL处理方面存在一些区别。

   createWebHistory()：

   createWebHistory()使用浏览器的history.pushState API 来管理路由历史记录。它会使用真实的URL路径，不会在URL中添加任何前缀或特殊符号，例如#。这是HTML5 History模式，也称为无哈希模式。示例代码如下：

import {
    createWebHistory } from 'vue-router';

const router = createRouter({
   
  history: createWebHistory(),
  routes: [...]
});

优势：

• 更美观的URL：使用无哈希模式，URL看起来更干净，没有额外的特殊字符。
• 更自然的导航：在页面导航时，URL将按照正常的路径方式更新，更符合用户的直觉。

缺点：

• 服务器配置：在使用无哈希模式时，需要在服务器上进行相应的配置，以确保在刷新页面或直接访问URL时能够正确加载应用程序的入口页面。

createWebHashHistory()：

createWebHashHistory()使用URL的哈希部分（#）来管理路由历史记录。它将路由信息添加到URL的哈希中，例如http://example.com/#/route。这是哈希模式，也称为带哈希模式。示例代码如下：

import {
    createWebHashHistory } from 'vue-router';

const router = createRouter({
   
  history: createWebHashHistory(),
  routes: [...]
});

优势：

• 简单部署：哈希模式不需要对服务器进行特殊配置，因为哈希部分不会发送到服务器，只在客户端使用。
• 兼容性：哈希模式在一些旧版本的浏览器中更可靠，因为这些浏览器可能不支持history.pushState API。

缺点：

• URL中有哈希符号：哈希模式会在URL中添加#符号，有些人认为这样的URL不够美观。
• 哈希部分不会发送到服务器：在哈希模式下，哈希部分的变化不会发送到服务器，所以服务器端无法根据路由进行相应的处理。