【Vue的路由，SPA概念】

最新推荐文章于 2024-04-10 06:10:17 发布

么卡

最新推荐文章于 2024-04-10 06:10:17 发布

阅读量498

点赞数

分类专栏： # Vue前端框架文章标签： Vue 路由器 SPA

本文链接：https://blog.csdn.net/weixin_43943548/article/details/98315772

版权

Vue前端框架专栏收录该内容

13 篇文章 0 订阅

订阅专栏

前言

本章是为了以后实现前端页面的搭建而写的，

重点在于如何实现 单页Web应用

因为相对于以前的传统多页面web，有很大的缺陷。

那么就必须了解一下Vue的路由设置。

SPA的概念

总的而言，我们知道之前的话都是用的是许多jsp,或html页面来组成我们的项目的。

那么这样有什么缺点呢？

每次请求返回的体积太大，加大了服务器的压力
页面较大的话，会影响页面的加载速度。
不能提供给用户良好的体验。

所以，在以上的缺点的问题在SPA都能解决

SPA(single page application，SPA）

SPA,中每次加载都是获取到自己所需要的特定数据，所以才方便快捷。

所以要用各种组件合成的路由来构建SPA

路由的创建

先理清思路：

先将需要用到的组件写好。
给写好的组件合成一个路由（规划路线）。
将合成好的路由放到路由器中。
将路由器挂载在vue的实列上。
定义瞄点（body）
尝试跳转 (body)

<script type="text/javascript">
		//定义两个组件
		const Home = Vue.extend({
			template: '<div><p>这是一个Home组件</p><div>Home组件内容</div></div>'
		});
		const About = Vue.extend({
			template: '<div><p>这是一个About组件</p><div>About组件内容</div></div>'
		});

		//定义路由
		//规划路线
		var routes = [{
			path: '/Home',
			component: Home
		}, {
			path: '/About',
			component: About
		}];

		//将路由放入到路由器中
		const router = new VueRouter({
			routes
		});



		new Vue({
			el: '#app',
			router,
			data() {
				return {
					msg: "hello"
				};
			}

		});
	</script>

路由的使用

<router-link  to="/Home">//就代表着使用Path 名字为Home 的组件

<!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.0.7/vue-router.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<h3>文本</h3>
					{{msg}}
				</li>
				<li>
					<!-- 定义锚点 -->
					<router-link to="/Home">go to Home</router-link>
					<router-link to="/About">go to About</router-link>
				</li>
				<li>
					<router-view></router-view>
				</li>

			</ul>
		</div>

	</body>
	
</html>

在这里插入图片描述

router-link的相关属性

replace

加了这个之后就可以消除历史记录。

导航后不会留下 history 记录

<router-link to="/Home" replace>go to Home</router-link>

以及一些跟导航相关的操作：

 	  this.$router.go(-1) ：代表着后退

      this.$router.go(1)：代表着前进

      this.$router.push({    切换到name为home的路由

       name:'home'

      });

注意这个只能在vue的实列中使用

,
		new Vue({
			el:"#app",
			// 将路由器挂载到指定边界
			router: router,
			data: function() {
				return {
					ts: new Date().getTime()
				}
			}，methods:{
				doForward:function(){
					console.log('doForward方法被调用');
					this.$router.go(1);
				},
				doBack:function(){
					console.log('doBack方法被调用');
					this.$router.go(-1);
				}
			}
			});

append

这个也就是改变地址栏的位置

设置 append 属性后，则在当前 (相对) 路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

<router-link to="/Home" append>go to Home</router-link>

渲染

有时候想要渲染成某种标签，例如 <li>。于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航

<router-link to="/foo" tag="li">foo</router-link>
 <!-- 渲染结果 -->

 <li>foo</li>

总结

为了以后整合页面，打好基础

Thanks♪(･ω･)ﾉ希望对大家有所帮助

么卡

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
【Vue的路由，SPA概念】

目录前言SPA的概念路由的创建路由的使用router-link的相关属性replaceappend渲染总结前言本章是为了以后实现前端页面的搭建而写的，重点在于如何实现单页Web应用因为相对于以前的传统多页面web，有很大的缺陷。那么就必须了解一下Vue的路由设置。SPA的概念总的而言，我们知道之前的话都是用的是许多jsp,或html页面来组成我们的项目的。那么这样有什么缺点呢...
复制链接

扫一扫