添加路由角度 3 - JavaScript

在 JavaScript 中，我们可以使用许多框架和库来添加路由，如 React 中的 React Router、Angular 中的 Angular Router、Vue 中的 Vue Router 等。这些框架和库都提供了易于使用的 API，可以轻松地添加和管理路由。

React Router

React Router 是一个流行的在 React 应用程序中添加路由的库。它提供了以下组件：

<BrowserRouter>

在 React 应用程序中使用 <BrowserRouter> 组件可以将 URL 与 React 组件相匹配。例如，以下代码将匹配路径为 /about 的 URL，并渲染 About 组件。

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Route path="/about" component={About} />
    </BrowserRouter>
  );
}

function About() {
  return <h1>About</h1>;
}

<Route>

<Route> 组件用于将 URL 与组件相匹配。例如，以下代码将匹配路径为 /about 的 URL，并渲染 About 组件。

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

function App() {
  return (
    <div>
      <Route path="/about" component={About} />
    </div>
  );
}

function About() {
  return <h1>About</h1>;
}

<Link>

<Link> 组件用于在 React 应用程序中导航。例如，以下代码将创建一个链接，当用户单击该链接时，将导航到 /about。

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

function App() {
  return (
    <div>
      <Link to="/about">About</Link>
    </div>
  );
}

Angular Router

Angular Router 是一个流行的在 Angular 应用程序中添加路由的库。它提供了以下组件：

RouterModule

在 Angular 应用程序中使用 RouterModule 模块可以将 URL 与组件相匹配。例如，以下代码将匹配路径为 /about 的 URL，并渲染 AboutComponent 组件。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './about.component';

const routes: Routes = [
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

router-outlet

router-outlet 组件用于在 Angular 应用程序中呈现路由组件。例如，以下代码将呈现 AboutComponent 组件。

<router-outlet></router-outlet>

routerLink

routerLink 指令用于在 Angular 应用程序中导航。例如，以下代码将创建一个链接，当用户单击该链接时，将导航到 /about。

<a routerLink="/about">About</a>

Vue Router

Vue Router 是一个流行的在 Vue 应用程序中添加路由的库。它提供了以下组件：

router

在 Vue 应用程序中使用 router 配置选项可以将 URL 与 Vue 组件相匹配。例如，以下代码将匹配路径为 /about 的 URL，并渲染 About 组件。

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    { path: '/about', component: About }
  ]
});

new Vue({
  router
}).$mount('#app');

<router-view>

<router-view> 组件用于在 Vue 应用程序中呈现路由组件。例如，以下代码将呈现 About 组件。

<router-view></router-view>

<router-link>

<router-link> 组件用于在 Vue 应用程序中导航。例如，以下代码将创建一个链接，当用户单击该链接时，将导航到 /about。

<router-link to="/about">About</router-link>

以上就是 JavaScript 中一些流行的添加路由的方法，它们都提供了易于使用的 API，可以轻松地添加和管理路由。