web发展历程

1.后端实现路由

在这个阶段，前端基本上只写界面，也就是html,css,js那些东西，然后在界面中挖槽用来接后端数据，包括路由也由后端负责，在这个阶段中，web开发非常依赖后端，常见的后端框架有python中的flask。

2.前后端分离阶段 

在这个阶段，前端和后端的耦合性很低，它不像flask一样，后端传过来的数据需要在前端对应好，这样前后端需要时时刻刻对接，非常不方便（写flask应该只能前后端全干？）。在前后端分离阶段，前端一般用react,angular,vue等前端框架部署页面，这时我们只需要向服务器发送请求获取数据，然后把数据转化为前端能使用的数据，比如vue中请求的json文件可以进行解析然后再模板中渲染，这时前后端就不需要一一对应，只需要后端发送的数据符合格式，那么前端就能正确渲染。所以，前端可以更关注前端的逻辑，后端可以更关注后端的业务逻辑和数据库申请等后端操作。这就实现了前后端分离。

3.SPA（single page application） 

 SPA与前后端分离的区别主要在于SPA可以在不重新刷新界面的同时切换url。

使用vue-router实现SPA

环境配置

进入项目后，在终端中（切到项目目录下，因为vue-router这种第三方插件需要打包）

键入 pnpm install vue-router -D

在实现SPA前，我们先要了解一下SPA是如何实现的：

SPA原理

要实现SPA，本质上就是实现在不刷新界面的同时切换掉url

 url的hash

 URL的hash也就是锚点(#), 本质上是改变window.location的href属性,我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新。我们也可以使用histroy接口实现。

 vue-router使用

接下来我会结合一个案例来讲讲vue-router是如何使用的。

src/Views 组件文件夹

Home.vue

About.vue

Ranking.vue

Recommend.vue

App.vue

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

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'  //导入组件 // import Home from '@/Views/Home.vue' // import About from '@/Views/About.vue'   //以下为路由懒加载，import导入可以做到分包处理，webpackChunkName可以给包指定名字 // const Home = import(/* webpackChunkName: 'Home' */"../Views/Home.vue") // const About = import(/* webpackChunkName: 'About' */"../Views/About.vue")  //创建路由:映射关系 const router = createRouter({   //选择模式(Hash)   // history: createWebHashHistory(),   history: createWebHashHistory(),   routes: [     {       path: "/home",       component: () => import("../Views/Home.vue"),       //嵌套路由       children: [         {           path: "recommend",//相当于/home/recommend           component: () => import("../Views/Recommend.vue")         },         {           path: "ranking",           component: () => import("../Views/Ranking.vue")         },         {           path: "",           redirect: "/home/recommend"         }       ]     },     { path: "/about", component: () => import("../Views/About.vue") },     { path: "/user/:id", component: () => import("../Views/User.vue") },//动态路由     { path: "/", redirect: "/home" },        ] })    //导出路由 export default router

main.js

import { createApp } from 'vue' import App from './App.vue' import router from './router/index.js'  const app = createApp(App) app.use(router) app.mount("#app")

实现效果如下：

2024-09-02 23-53-59

主要流程

 要建立组件与url的关系，局部分为三步：创建组件，创建路由，构建路由和组件的关系

创建组件自不必多说，创建路由和创建组件关系才是重点。

index.js

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'  //导入组件 // import Home from '@/Views/Home.vue' // import About from '@/Views/About.vue'   //以下为路由懒加载，import导入可以做到分包处理，webpackChunkName可以给包指定名字 // const Home = import(/* webpackChunkName: 'Home' */"../Views/Home.vue") // const About = import(/* webpackChunkName: 'About' */"../Views/About.vue")  //创建路由:映射关系 const router = createRouter({   //选择模式(Hash)   // history: createWebHashHistory(),   history: createWebHashHistory(),   routes: [     {       path: "/home",       component: () => import("../Views/Home.vue"),       //嵌套路由       children: [         {           path: "recommend",//相当于/home/recommend           component: () => import("../Views/Recommend.vue")         },         {           path: "ranking",           component: () => import("../Views/Ranking.vue")         },         {           path: "",           redirect: "/home/recommend"         }       ]     },     { path: "/about", component: () => import("../Views/About.vue") },     { path: "/user/:id", component: () => import("../Views/User.vue") },//动态路由     { path: "/", redirect: "/home" },        ] })    //导出路由 export default router

 通常我们会在src下创建一个router文件夹，然后在router文件夹下写路由的逻辑。

首先，我们导入vue-router中的createRouter()方法创建路由对象，我们传入一个对象作为参数，在这个对象中写入histroy，routes两个成员（当然还有更多）。

History: 可以选择url的模式,如果为createWebHashHistroy的话，那么url路径会以/*/分隔，如果为createWebHistroy的话就不会有/*/分隔，这样更容易阅读。

比如有路径

localhost:8080/*/home/recommend（Hash模式）

localhost:8080/home/recommend （History模式）

routes:这个就是用来配置url与组件关系的东西，比较简单，就是指定好path，然后再为其绑定一个组件，当在浏览器中访问该路径时会在合适的地方渲染这个组件。redirect为重定向，当浏览器访问目标路径时自动将其导向新的路径。关于children的话，这个涉及路由嵌套，可以这么认为：

这个在之后了解完route-view应该更好理解。可以这样理解：在根组件app.vue中，我们使用route-view来占位，当进入目标路径时，路由会根据这个url找到对应的组件并将其渲染在route-view中，而嵌套路由其实就是重复这个过程。在渲染的组件中在写入route-view，在进入下一级路径时再次找到对应的组件将其渲染在组件中的route-view中。

最后，返回路由。到此为止，路由创建和url和组件间的绑定就告一段落了。

接下来，我们要开始配置路由（使用返回的router）

main.js

import { createApp } from 'vue' import App from './App.vue' import router from './router/index.js'  const app = createApp(App) app.use(router) app.mount("#app")

使用app.use(router)使用该路由就可以了。

本文没有使用router-link，而是使用script来实现跳转。