面试官：vue，react中的API和浏览器路由有什么关系 ？

一. 浏览器路由的基本机制

浏览器提供两种路由机制：

1. History API

   • URL 格式：http://example.com/home

   • 需要服务器配置支持

   • 更美观的 URL

// 新增历史记录
history.pushState(state, title, url)

// 替换当前历史记录
history.replaceState(state, title, url)

// 监听路由变化
window.addEventListener('popstate', (event) => {
  // 处理路由变化
})

2. Hash 模式

   • URL 格式：http://example.com/#/home

   • 不需要服务器配置

   • URL 中包含#

// 监听 hash 变化
window.addEventListener('hashchange', () => {
  // 处理路由变化
})

二. React Router 实现

// React Router 配置
import { BrowserRouter, Route, Routes } from 'react-router-dom'

function App() {
  return (
    <BrowserRouter>  {/* History 模式 */}
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  )
}

// 或使用 Hash 模式
import { HashRouter } from 'react-router-dom'

三. Vue Router 实现

// Vue Router 配置
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'

const router = createRouter({
  // History 模式
  history: createWebHistory(),
  // 或 Hash 模式
  // history: createWebHashHistory(),
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About }
  ]
})

四. 路由守卫实现

1. React Router

// 路由守卫组件
function PrivateRoute({ children }) {
  const auth = useAuth(); // 自定义 hook 检查认证状态
  
  if (!auth) {
    return <Navigate to="/login" />;
  }
  
  return children;
}

// 使用守卫
<Route 
  path="/admin" 
  element={
    <PrivateRoute>
      <Admin />
    </PrivateRoute>
  } 
/>

2. Vue Router

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!auth.isLoggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

五. 路由参数处理

1. React Router

// 参数路由
<Route path="/user/:id" element={<User />} />

// 组件中获取参数
function User() {
  const { id } = useParams();
  const [searchParams] = useSearchParams();
  
  return <div>User ID: {id}</div>;
}

2. Vue Router

// 路由配置
{
  path: '/user/:id',
  component: User,
  props: true
}

// 组件中获取参数
export default {
  props: ['id'],
  setup(props) {
    const route = useRoute();
    console.log(route.query); // 获取查询参数
  }
}

六. 编程式导航

1. React Router

import { useNavigate } from 'react-router-dom';

function Component() {
  const navigate = useNavigate();
  
  const handleClick = () => {
    navigate('/home');
    // 带参数
    navigate('/user/123');
    // 带查询字符串
    navigate('/search?q=keyword');
  };
}

2. Vue Router

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    
    const handleClick = () => {
      router.push('/home');
      // 带参数
      router.push('/user/123');
      // 带查询字符串
      router.push({ path: '/search', query: { q: 'keyword' }});
    };
  }
}