前端路由与导航

章节概述

在Web3前端应用开发中，路由与导航是构建单页应用(SPA)的核心功能之一。良好的路由设计可以提高用户体验，使应用结构更加清晰。本章节将介绍Web3前端应用中常用的路由解决方案，包括React Router和Vue Router的使用方法，以及导航守卫的实现。

核心知识点讲解

1. 前端路由基础

1.1 什么是前端路由

• 前端路由：在单页应用中，通过URL的变化来控制页面内容的切换，而不需要重新加载整个页面
• 核心原理：监听URL变化，根据URL匹配对应的组件并渲染
• 优点：提高用户体验，减少服务器请求，实现前后端分离

1.2 前端路由模式

• Hash模式：使用URL的hash部分（#）来模拟路由，如 http://example.com/#/home

  • 优点：兼容性好，不需要服务器配置
  • 缺点：URL不够美观

• History模式：使用HTML5的History API来实现路由，如 http://example.com/home

  • 优点：URL美观，符合RESTful风格
  • 缺点：需要服务器配置，兼容性稍差

2. React Router

2.1 基本使用

• 安装：npm install react-router-dom
• 核心组件：
  • BrowserRouter：使用History模式的路由容器
  • HashRouter：使用Hash模式的路由容器
  • Routes：路由配置容器
  • Route：定义路由规则
  • Link：导航链接
  • NavLink：带有激活状态的导航链接

2.2 路由配置

• 基本路由：定义路径与组件的映射
• 嵌套路由：实现页面布局的嵌套
• 动态路由：处理带参数的路由
• 索引路由：设置默认子路由

2.3 导航守卫

• 路由守卫：在路由切换前后执行的逻辑
• 实现方式：
  • 使用 useEffect 钩子监听路由变化
  • 使用 Navigate 组件进行重定向
  • 使用 useNavigate 钩子进行编程式导航

3. Vue Router

3.1 基本使用

• 安装：npm install vue-router
• 核心概念：
  • createRouter：创建路由实例
  • createWebHistory：使用History模式
  • createWebHashHistory：使用Hash模式
  • routes：路由配置数组
  • <router-link>：导航链接
  • <router-view>：路由内容渲染

3.2 路由配置

• 基本路由：定义路径与组件的映射
• 嵌套路由：实现页面布局的嵌套
• 动态路由：处理带参数的路由
• 命名路由：为路由指定名称
• 命名视图：一个路径显示多个组件

3.3 导航守卫

• 全局守卫：router.beforeEach、router.afterEach
• 路由守卫：beforeEnter
• 组件守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

4. Web3应用的路由特殊考虑

• 钱包连接状态：根据钱包连接状态控制路由访问
• 网络切换：监听网络变化并更新路由状态
• 权限控制：基于用户角色或拥有的资产控制路由访问
• 交易状态：在交易过程中管理路由导航

实用案例分析

案例1：使用React Router构建Web3应用路由

功能说明

使用React Router构建一个包含主页、资产页、交易页和设置页的Web3应用路由，并实现导航守卫来控制未连接钱包时的访问。

实现步骤

1. 安装React Router

npm install react-router-dom

2. 创建路由配置

import React from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import Home from './pages/Home';
import Assets from './pages/Assets';
import Transactions from './pages/Transactions';
import Settings from './pages/Settings';
import ConnectWallet from './pages/ConnectWallet';
import { useWallet } from './hooks/useWallet';

// 受保护的路由组件
function ProtectedRoute({ children }) {
  const { isConnected } = useWallet();
  
  if (!isConnected) {
    return <Navigate to="/connect" replace />;
  }
  
  return children;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/connect" element={<ConnectWallet />} />
        <Route path="/assets" element={
          <ProtectedRoute>
            <Assets />
          </ProtectedRoute>
        } />
        <Route path="/transactions" element={
          <ProtectedRoute>
            <Transactions />
          </ProtectedRoute>
        } />
        <Route path="/settings" element={
          <ProtectedRoute>
            <Settings />
          </ProtectedRoute>
        } />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

3. 创建导航组件

import React from 'react';
import { NavLink } from 'react-router-dom';
import { useWallet } from './hooks/useWallet';

function Navigation() {
  const { isConnected, address } = useWallet();
  
  return (
    <nav>
      <ul>
        <li>
          <NavLink to="/" end>
            主页
          </NavLink>
        </li>
        {isConnected && (
          <>
            <li>
              <NavLink to="/assets">
                资产
              </NavLink>
            </li>
            <li>
              <NavLink to="/transactions">
                交易
              </NavLink>
            </li>
            <li>
              <NavLink to="/settings">
                设置
              </NavLink>
            </li>
          </>
        )}
        <li>
          <NavLink to="/connect">
            {isConnected ? `已连接: ${address.slice(0, 6)}...` : '连接钱包'}
          </NavLink>
        </li>
      </ul>
    </nav>
  );
}

export default Navigation;

案例2：使用Vue Router构建Web3应用路由

功能说明

使用Vue Router构建一个包含主页、资产页、交易页和设置页的Web3应用路由，并实现导航守卫来控制未连接钱包时的访问。

实现步骤

1. 安装Vue Router

npm install vue-router

2. 创建路由配置

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import Assets from './views/Assets.vue';
import Transactions from './views/Transactions.vue';
import Settings from './views/Settings.vue';
import ConnectWallet from './views/ConnectWallet.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/connect',
    name: 'ConnectWallet',
    component: ConnectWallet
  },
  {
    path: '/assets',
    name: 'Assets',
    component: Assets,
    meta: { requiresAuth: true }
  },
  {
    path: '/transactions',
    name: 'Transactions',
    component: Transactions,
    meta: { requiresAuth: true }
  },
  {
    path: '/settings',
    name: 'Settings',
    component: Settings,
    meta: { requiresAuth: true }
  }
];

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

// 导航守卫
router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  const isConnected = localStorage.getItem('walletConnected') === 'true';
  
  if (requiresAuth && !isConnected) {
    next('/connect');
  } else {
    next();
  }
});

export default router;

3. 创建导航组件

<template>
  <nav>
    <ul>
      <li>
        <router-link to="/">主页</router-link>
      </li>
      <li v-if="isConnected">
        <router-link to="/assets">资产</router-link>
      </li>
      <li v-if="isConnected">
        <router-link to="/transactions">交易</router-link>
      </li>
      <li v-if="isConnected">
        <router-link to="/settings">设置</router-link>
      </li>
      <li>
        <router-link to="/connect">
          {{ isConnected ? `已连接: ${address.slice(0, 6)}...` : '连接钱包' }}
        </router-link>
      </li>
    </ul>
  </nav>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const isConnected = ref(false);
const address = ref('');

onMounted(() => {
  isConnected.value = localStorage.getItem('walletConnected') === 'true';
  address.value = localStorage.getItem('walletAddress') || '';
});
</script>

代码优化建议

1. 路由懒加载

   • 使用动态导入实现路由组件的懒加载，减小初始加载体积
   • 例如：component: () => import('./views/Assets.vue')

2. 路由配置分离

   • 将路由配置分离到单独的文件中，提高代码可维护性
   • 例如：创建 router/index.js 文件管理路由配置

3. 导航守卫优化

   • 抽离导航守卫逻辑到单独的函数中，提高代码可读性
   • 例如：创建 router/guards.js 文件管理导航守卫

4. 路由元信息

   • 使用路由元信息存储路由相关的配置，如标题、权限等
   • 例如：meta: { title: '资产', requiresAuth: true }

5. 错误路由处理

   • 添加404页面和错误处理路由，提高用户体验
   • 例如：添加 { path: '/:pathMatch(.*)*', component: NotFound } 路由

总结

本章节介绍了Web3前端应用中的路由与导航实现，包括React Router和Vue Router的使用方法，以及导航守卫的实现。通过合理的路由设计，可以提高Web3应用的用户体验，使应用结构更加清晰。

在实际开发中，应根据项目的技术栈选择合适的路由解决方案，并结合Web3应用的特点，如钱包连接状态、网络切换等，实现相应的路由控制逻辑。同时，要注意路由性能优化，如使用懒加载、合理配置路由等。

通过本章节的学习，开发者应该能够：

1. 了解前端路由的基本概念和原理
2. 掌握React Router和Vue Router的使用方法
3. 实现导航守卫来控制路由访问
4. 针对Web3应用的特点进行路由设计
5. 应用路由优化技巧提高应用性能