一、什么是路由(router)
(一)定义
- 路由是一个网络工程学中的术语。
- 路由就是通过互联网的网络把信息从源地址传输到目的地址的活动。
(二)路由器机制
- 路由:决定数据包从来源到目的地的路径。
- 传送:将输入端的数据转移到合适的输出端。
二、前/后端渲染
(一)前端渲染
- 首先由用户在浏览器的地址栏中输入域名。
- 浏览器将 URL 发送到静态资源服务器。
- 根据 URL 从静态资源服务器获取相关 HTML+CSS 代码。
- 浏览器将 HTML+CSS 代码渲染到页面中。
- 浏览器执行 JS 代码,通过 Ajax 请求提供 API 接口的服务器,获取数据。
- 获取数据后,利用 JS 将数据渲染到浏览器中。
(二)后端渲染
- 首先由用户在浏览器的地址栏中输入域名。
- 浏览器将域名发送到服务器。
- 服务器内部对域名进行解析。
- 利用 Java / PHP 等技术从数据库中读取数据,并将数据动态的放到页面上。
- 将生成的页面直接返给浏览器。
(三)前端路由
- SPA(单页面富应用技术)
- 根据 URL 向静态资源服务器发起请求,获取页面资源。
- 此时静态资源服务器将所有数据返回,只有一个HTML、一个CSS、一个JS文件。
- SPA 主要的特点就是在前后端分离的基础上加了一层前端路由。
- 前端路由
- 分配页面,将资源服务器返回的 HTML、CSS、JS 文件划分为多个组件。
- 访问不同的 URL 渲染不同的页面。
(四)后端路由
- 定义:后端处理 URL 与页面之间的映射关系。
- 缺点:
- 整个页面的模块都是由后端人员来编写和维护。
- 前端开发人员要想开发页面,需要通过 PHP 和 Java 等语言来编写页面代码。
- HTML 代码和数据以及对应的逻辑会混在一起。
三、SPA 相关技术
使用 SPA 时,对浏览器有一个要求,在修改 URL 时页面不进行刷新。实现这一效果有以下两种方式:
- 使用 URL 的 hash
- 使用 H5 的 history 模式
(一)使用 URL 的 hash
-
将创建好的项目运行在本地服务器上。指令:npm run serve
-
默认网址:localhost:8080(占用 8080 端口)
-
在控制台输入:
location.hash = "home"
-
敲下回车后:
- 网址发生变化。
- 页面不刷新。
(二)使用 H5 的 history 模式
-
堆加(入栈):history.pushState()
-
history.pushState() 的存储方式与栈数据结构相似。
-
在控制台输入:
history.pushState({}, '', 'home')
-
按下回车后,路径发生变化,页面不刷新。
-
-
出栈:history.back()
-
history.back() 取出最后一次入栈的 URL
-
在控制台输入:
history.back()
-
按下回车后,返回上一层页面,页面不刷新。
-
-
关闭其他页面,跳转到指定路径:history.replaceState()
-
使用 history.replaceState 跳转页面时,其他页面全部关闭,且不能返回上一以面。
-
在控制台输入:
history.replaceState({}, '', 'home')
-
按下回车,路径放生变化,且不能返回上一页面。
-
-
history.go() 跳转到指定页面
-
只有使用 history.pushState() 后方可使用 history.go()
-
参数为负数时表示向前跳转,为整数时表示向后跳转。
-
向前跳转一页:
-
向前跳转两页:
-
向后跳转三页:
-
四、vue-router
(一)安装 vue-router
-
若在使用脚手架创建项目时已勾选 Router 选项(建议勾选),则无需安装。
-
指令:npm install vue-router –save
-
安装完成后,打开项目根目录中的 package.json 文件,在文件中可以查看路由的版本号。
(二)配置路由
- 在 src 目录中创建 router 目录,在目录中创建 index.js 文件。
- 在 index.js 文件中导入 vue-router 对象。
- 通过 Vue.use(插件) 安装插件。
- 创建 Router 对象。
- 在 routes 中配置路由,页面与 URL 之间的关系。
- 抛出路由接口。
(三)系统创建路由
-
利用脚手架创建项目时,勾选 Runter 选项。
-
创建项目后,项目的 src 目录中会出现 router 和 views 文件夹。
-
router -> index.js 文件负责配置前端路由。
-
views 文件夹中,每一个 .vue 文件代标一个页面的跟组件。About.vue 和 Home.vue 是系统默认创建的。
-
修改 router -> index.js 文件(将文件中的注释部分删掉)
import { createRouter, createWebHistory } from 'vue-router' import Home from '../views/Home.vue' import About from '../views/About.vue' const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router
-
简化 Home.vue 文件
<template> <div class="home"> <h2>我是 Home 首页</h2> </div> </template> <script> export default { } </script> <style> </style>
-
简化 About.vue 文件
<template> <div class="about"> <h2>我是 About 关于页面</h2> </div> </template> <script> export default { } </script> <style> </style>
-
控制台输入指令,npm run serve 运行程序
五、CSDN 导航案例
(一)需求
(二)设计过程
-
删除原文件夹中的 Home.vue 和 About.vue 文件。
-
在 views 文件夹中创建新文件。
-
编辑所有 vue 文件。
<template> <div class="screen"> <h2>文章</h2> </div> </template> <script> export default { } </script> <style> </style>
-
配置 router -> index.js 文件。
import { createRouter, createWebHistory } from 'vue-router' import Article from '../views/article.vue' import College from '../views/college.vue' import Download from '../views/download.vue' import Forum from '../views/forum.vue' import Problem from '../views/problem.vue' import Code from '../views/code.vue' import Recruit from '../views/recruit.vue' import Book from '../views/book.vue' import Vip from '../views/vip.vue' const routes = [ { path: '/article', name: 'article', component: Article }, { path: '/college', name: 'College', component: College }, { path: '/download', name: 'Download', component: Download }, { path: '/forum', name: 'Forum', component: Forum }, { path: '/problem', name: 'Problem', component: Problem }, { path: '/code', name: 'Code', component: Code }, { path: '/recruit', name: 'Recruit', component: Recruit }, { path: '/book', name: 'Book', component: Book }, { path: '/vip', name: 'Vip', component: Vip } ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router
-
编辑 App.vue 文件。
<template> <div id="app"> <div id="nav"> <ul> <li v-for="item in navList" :key="(item,index)"> <router-link :to="item.to">{{item.name}}</router-link> </li> </ul> </div> <router-view class="view"/> </div> </template> <script> export default { data() { return { navList:[ {to:"article",name:"博文"}, {to:"college",name:"学院"}, {to:"download",name:"下载"}, {to:"forum",name:"论坛"}, {to:"problem",name:"问答"}, {to:"code",name:"代码"}, {to:"recruit",name:"招聘"}, {to:"book",name:"电子书"}, {to:"vip",name:"VIP"}, ] } } } </script> <style> * { margin: 0px; padding: 0px; } body { background-color: #d0d0d1; } #nav { width: 720px; height: 40px; margin: auto; } #nav ul { width: 100%; height: 100%; background-color: white; clear: left; } #nav li { width: 80px; height: 40px; text-align: center; line-height: 40px; list-style: none; float: left; } #nav li:hover { background-color: #008f88; } #nav li:hover a { display: block; width: 100%; height: 100%; color: white; } #nav li a { text-decoration: none; color: black; } .view { width: 1200px; height: 600px; margin: auto; text-align: center; line-height: 600px; font-size: 50px; margin-top: 10px; background-color: white; border-radius: 20px; } </style>