vue路由

最新推荐文章于 2022-09-21 20:31:19 发布

HJC橙

最新推荐文章于 2022-09-21 20:31:19 发布

阅读量88

点赞数

本文链接：https://blog.csdn.net/kiki208418895/article/details/101025049

版权

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

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

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

路由

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
		<title>路由</title>
	</head>
	<body>
	<!-- vue所管理的边界 -->
	<div id="app">
		<router-link to="/Home">首页</router-link>
		<router-link to="/About">本站</router-link>
		<router-view></router-view>
	</div>
	</body>
	<script>
		//定义两个组件 
		const Home=Vue.extend({
			template:"<div><p>橙橙</p></div>"
		});
		
		const About = Vue.extend({
			template: "<div><p>这是一个About组件</p><div>About组件内容</div></div>"
		});
		
		//路由集合
		let routes=[
			{
					path:'/Home',
					compoment:Home
			},
			{
					path:'/About',
					compoment:About
			}
		]
		//路由器
		let router=new VueRouter({routes});
		
		
		new Vue({
			el:'#app',
			//将路由器挂载到vue管理的边界
			router,
			data(){
				return{
				 a:'橙橙'
				
				};
			}
			
		})
	</script>
</html>

结果：
在这里插入图片描述

HJC橙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue路由

SPA是什么单页Web应用（single page application，SPA），就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序单页面应用程序：只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中传统多页面应用程序：对于传统的多页面应用程序来说, 每次请求服务...
复制链接

扫一扫