router路由类型和使用方法

Vue Router

路由类型
- 静态路由 ：这是最基本的路由类型，路径和组件之间的映射关系是固定的。例如，定义一个路径为/home，对应显示Home组件。
- 动态路由 ：路径中包含动态参数，这些参数可以在不同的路由导航中变化。例如，/user/:id，:id就是动态参数，可以根据不同的id值显示不同用户的信息。
- 嵌套路由 ：在一个组件的基础上，再嵌套显示其他组件。比如，/user/:id/profile，在User组件中再嵌套显示Profile组件，用于展示用户的详细资料。

使用方法

安装和引入 ：首先通过 npm 安装 Vue Router：npm install vue - router。然后在 Vue 项目中引入并创建路由实例。

javascript

复制代码

// main.js
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue - router';
import App from './App.vue';
import Home from './components/Home.vue';
import User from './components/User.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/user/:id',
      name: 'User',
      component: User
    }
  ]
});

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

导航：在模板中使用<router - link>组件进行导航。

html

复制代码

<!-- App.vue -->
<template>
  <div id="app">
    <router - link to="/">首页</router - link>
    <router - link :to="{name: 'User', params: {id: 1}}">用户1</router - link>
    <router - view></router - view>
  </div>
</template>

获取动态参数 ：在组件中可以通过$route对象获取动态参数。

html

复制代码

<!-- User.vue -->
<template>
  <div>
    <p>用户ID: {{ $route.params.id }}</p>
  </div>
</template>

嵌套路由 ：在父组件的模板中定义<router - view>用于显示子路由组件。

javascript

复制代码

// 定义嵌套路由
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/user/:id',
      name: 'User',
      component: User,
      children: [
        {
          path: 'profile',
          name: 'Profile',
          component: Profile
        }
      ]
    }
  ]
});

html

复制代码

<!-- User.vue -->
<template>
  <div>
    <router - link :to="{name: 'Profile', params: {id: $route.params.id}}">用户资料</router - link>
    <router - view></router - view>
  </div>
</template>

React Router

路由类型
- 静态路由 ：与 Vue Router 类似，定义固定的路径和组件映射。例如，路径/home对应Home组件。
- 动态路由 ：路径包含参数，如/user/:id，:id为动态参数，根据不同的id值展示不同内容。
- 嵌套路由 ：在一个组件内嵌套展示其他组件对应的路由，如/user/:id/profile。

使用方法

安装和引入 ：通过 npm 安装 React Router：npm install react - router - dom。然后在应用中引入相关组件。

jsx

复制代码

// index.js
import React from'react';
import ReactDOM from'react - dom';
import { BrowserRouter as Router } from'react - router - dom';
import App from './App';

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

定义路由 ：在App.js中定义路由。

jsx

复制代码

import React from'react';
import { Routes, Route } from'react - router - dom';
import Home from './components/Home';
import User from './components/User';

const App = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />}></Route>
      <Route path="/user/:id" element={<User />}></Route>
    </Routes>
  );
};

export default App;

导航：使用Link组件进行导航。

jsx

复制代码

import React from'react';
import { Link } from'react - router - dom';

const Navigation = () => {
  return (
    <div>
      <Link to="/">首页</Link>
      <Link to="/user/1">用户1</Link>
    </div>
  );
};

export default Navigation;

获取动态参数 ：在组件中使用useParams Hook 获取动态参数。

jsx

复制代码

import React from'react';
import { useParams } from'react - router - dom';

const User = () => {
  const { id } = useParams();
  return (
    <div>
      <p>用户ID: {id}</p>
    </div>
  );
};

export default User;

嵌套路由 ：在父组件中定义Routes和Route展示子路由组件。

jsx

复制代码

import React from'react';
import { Routes, Route, Link } from'react - router - dom';
import Profile from './components/Profile';

const User = () => {
  return (
    <div>
      <Link to="profile">用户资料</Link>
      <Routes>
        <Route path="profile" element={<Profile />}></Route>
      </Routes>
    </div>
  );
};

export default User;