三分钟超级简单易上手的路由SPA实现思路~~

一杯咖啡.

已于 2022-09-06 10:14:26 修改

阅读量510

点赞数 1

文章标签： vue.js 前端 javascript json java

于 2022-09-05 21:46:00 首次发布

本文链接：https://blog.csdn.net/m0_67094505/article/details/126697897

版权

今日分享内容

第四步：生成路由对象然后传 `routes` 配置

第五步：将vue对象挂载到vue实例中

第六步：定义锚点

第七步：触发锚点事件

一、SPA简介

SPA是什么？

用于单页面Web应用（single page application，SPA），就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序。

单页面应用程序：
只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中。
传统多页面应用程序：
对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面。

对于以前使用的jsp做页面的时候，一个页面会有很多个jsp组成，现在我们点击导航栏，不再是跳转页面，通过路由的方式，跳转到组件，将使用SPA用于html页面处理多结构复杂的组件通信问题。

优势：

①减少了请求体积，加快页面响应速度，降低了对服务器的压力
②更好的用户体验，让用户在web app感受native app的流畅

二、路由实现思路

首先进入官网BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

找到相对应的js版本，

第一步：引入路由js的依赖

<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>

第二步：创建自定义组件

const Home = Vue.extend({});

注意：

①extend是构造一个组件的语法器. 你给它参数，他给你一个组件,然后这个组件你可以作用到Vue.component这个全局注册方法里，也可以在任意vue模板里使用car组件。

②也可以用以前的方式创建和获得组件，效果也是一样的。
Vue.component("button-counter", {...});//创建组件
var ButtonCounter = Vue.component('button-counter');//获得组件

第三步：定义路由与组件的对应关系

var routes = [{path: '/about',component: About}];

注意：根路径“/”

第四步：生成路由对象然后传 `routes` 配置

const router = new VueRouter({routes:routes});

注意:

route和router的区别
route：路线
router：路由器
路由器中包含了多个路线

第五步：将vue对象挂载到vue实例中

var vm = new Vue({router: router}).$mount('#app');

第六步：定义锚点

<router-view></router-view>

第七步：触发锚点事件

<router-link to="/home">首页</router-link>

步骤解析如图所示：

代码块展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 引入vue的js -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<!-- 1、引入路由js依赖 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
		<title>1、路由SPA</title>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<!-- 7、触发锚点事件 -->
			<router-link to="/home">首页</router-link>
			<router-link to="/about">关于</router-link>
			<!-- 6、定义锚点 -->
			<router-view></router-view>
		</div>
		<script type="text/javascript">
			///2、定义组件  --->首页对应的组件、关于对应的组件
			// const/let/var
			const Home = Vue.extend({
				template:'<div>这是首页内容，展示最新的10篇博客</div>'
			})
			const About = Vue.extend({
				template:'<div>这是关于本站显示的内容，本站的发展史。。。。</div>'
			})
			// 3/定义路由与组件的对应关系
			let routes = [
				{path:'/home',component:Home},
				{path:'/about',component:About},
			]
			// 4、生成路由对象
			const router = new VueRouter({routes:routes})
			new Vue({
				el:'#app',
				router,//5、将vue对象挂载到vue实例中
				data(){
					return{
						msg:'hello,我是一杯咖啡！'
					}
				}
			})
		</script>
	</body>
</html>

运行效果展示：

当点击首页时会出现以下效果

点击关于时：

三、无痕浏览

replace

今日分享内容到此结束，希望对您有所帮助喔~

预告下期内容：【nodeJS环境搭建】

我们下期再见！！！

一杯咖啡.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三分钟超级简单易上手的路由SPA实现思路~~

用于单页面Web应用（single page application，SPA），就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面对于以前使用的jsp做页面的时候，一个页面会有很多个jsp组成，现在我们。
复制链接

扫一扫