【如何使用路由建立多视图单页应用】的详细讲解

使用路由建立多视图单页应用

1. 多视图
- 1.1 引入依赖库
- 1.2 创建自定义组件
2. React（使用React Router）
3. Angular（使用Angular Router）
4. Vue（使用Vue Router）

1. 多视图

构建多视图的单页应用程序（Single Page Application，简称SPA）通常会使用前端路由来实现，前端路由允许在不重新加载整个页面的情况下动态地加载不同的视图内容，这可以通过各种前端框架（如React、Angular、Vue等）中的路由库来实现，下面，我将介绍如何在这些流行框架中使用路由来构建一个多视图SPA。

1.1 引入依赖库

建立一个基本html项目，创建一个demo页面并引入一下js库文件

<script src="js/vue.js"></script>
<script src="js/vue-router.min.js"></script>

1.2 创建自定义组件

创建vue组件有两种方式：

var MyComonent = Vue.component(“button-counter”, {…})；
创建一个vue组件并赋给MyComponent变量
const Home = Vue.extend({})；
extend是构造一个组件的语法器. 你给它参数，他给你一个组件,然后这个组件你可以作用到Vue.component这个全局注册方法里，也可以在任意vue模板里使用

创建一个Home组件和About组件

//组件名用PPascalCase风格
const Home = Vue.extend({//必须定义一个根元素作为容器,包裹模板中的内容元素template: '<div><h1>Home组件</h1><div>Home组件内容区</div></div>'
});const About = Vue.extend({//必须定义一个根元素作为容器,包裹模板中的内容元素template: '<div><h1>About组件</h1><div>About组件内容区</div></div>'
});

2. React（使用React Router）

React Router是React中一个非常流行的路由库。

初始化项目和安装依赖

npx create-react-app my-spa
cd my-spa
npm install react-router-dom

设置路由

在src目录中创建几个组件文件，例如Home.js, About.js, Contact.js，分别代表不同的视图。

在App.js中设置路由。

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';function App() {return (<Router><nav><ul><li><Link to="/">Home</Link></li><li><Link to="/about">About</Link></li><li><Link to="/contact">Contact</Link></li></ul></nav><Switch><Route exact path="/" component={Home} /><Route path="/about" component={About} /><Route path="/contact" component={Contact} /></Switch></Router>);
}export default App;

当用户点击不同的链接时，<Router> 会匹配 <Route> 规则来动态加载对应组件。

创建视图组件

在每个组件文件中定义不同的视图。
运行应用
```
npm start
```

3. Angular（使用Angular Router）

在Angular中，有一个内建的路由库可以使用。

创建Angular应用
```
ng new my-spa
cd my-spa
```

设置路由

在app-routing.module.ts中配置路由。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';const routes: Routes = [{ path: '', component: HomeComponent },{ path: 'about', component: AboutComponent },{ path: 'contact', component: ContactComponent },
];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule { }

创建视图组件

使用Angular CLI来生成新组件。

ng generate component home
ng generate component about
ng generate component contact

使用 <router-outlet>

在app.component.html中，使用 <router-outlet> 作为视图的占位符。
运行应用
```
ng serve
```

4. Vue（使用Vue Router）

Vue Router是Vue的官方路由管理器。

创建Vue应用

vue create my-spa
cd my-spa
vue add router

设置路由

在src/router/index.js文件中配置路由。

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Contact from '../views/Contact.vue'Vue.use(Router)const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About},{path: '/contact',name: 'Contact',component: Contact}
]const router = new Router({routes
})export default router;