📅  最后修改于: 2023-12-03 15:27:02.311000             🧑  作者: Mango
在 JavaScript 中,我们可以使用许多框架和库来添加路由,如 React 中的 React Router、Angular 中的 Angular Router、Vue 中的 Vue Router 等。这些框架和库都提供了易于使用的 API,可以轻松地添加和管理路由。
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 应用程序中添加路由的库。它提供了以下组件:
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
配置选项可以将 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,可以轻松地添加和管理路由。