vue路由

尽力漂亮

于 2019-09-19 17:00:15 发布

阅读量149

点赞数 1

分类专栏：前端文章标签： vue路由

本文链接：https://blog.csdn.net/weixin_44106334/article/details/101028103

版权

前端专栏收录该内容

34 篇文章 2 订阅

订阅专栏

文章目录

1. SPA是什么
2. SPA实现思路和技术点
- 路由
- - 思路
const,let,var的区别

1. SPA是什么

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

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

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

2. SPA实现思路和技术点

1 ajax

2 锚点的使用（window.location.hash #）

3 hashchange 事件 window.addEventListener(“hashchange”,function () {})

4 监听锚点值变化的事件，根据不同的锚点值，请求相应的数据

5 原本用作页面内部进行跳转，定位并展示相应的内容

路由

思路

1、确保引入Vue.vue-router的js依赖

<script src="https://cdn.bootcss.com/vue-router/3.0.7/vue-router.js"></script>

2、首先需要定义组件（就是展示不同的页面效果）

const Home = Vue.extend({
			template: '<div><p>这是wxm写的Home组件</p></div>'
		});
		const About = Vue.extend({
			template: '<div><p>这是wxm写的About组件</p></div>'
		});

3、需要将不同的组件放入一个容器中（路由集合）

let routes = [{
				path: '/',
				component: Home
			},
			{
				path: '/Home',
				component: Home
			},
			{
				path: '/About',
				component: About
			}
		]

4、将路由集合组装成路由器

	const router = new VueRouter({
			routes
		});

5、将路由挂载到Vue实例中

new Vue({
			el: '#test',
			router,
			data: {
				msg: 'hello VUE'
			}
		})

6、定义锚点

7、跳转

<div id="test">
			<router-link to="/Home">首页</router-link>
			<router-link to="/About">关于本站</router-link>
			<router-view></router-view>
		</div>

完整案例

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
	</head>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<!-- 1.//确保引入Vue.vue-router的js依赖 -->
	<script src="https://cdn.bootcss.com/vue-router/3.0.7/vue-router.js"></script>
	<body>
		<div id="test">
			<router-link to="/Home">首页</router-link>
			<router-link to="/About">关于本站</router-link>
			<router-view></router-view>
		</div>

	</body>
	<script type="text/javascript">
		// 创建组件
		const Home = Vue.extend({
			template: '<div><p>这是wxm写的Home组件</p></div>'
		});
		const About = Vue.extend({
			template: '<div><p>这是wxm写的About组件</p></div>'
		});
		//添加url与组建的映射关系(组合路由)
		let routes = [{
				path: '/',
				component: Home
			},
			{
				path: '/Home',
				component: Home
			},
			{
				path: '/About',
				component: About
			}
		]
		//将路由的集合组合成路由器
		const router = new VueRouter({
			routes
		});

		new Vue({
			el: '#test',
			router,
			data: {
				msg: 'hello VUE'
			}
		})
	</script>
</html>

在这里插入图片描述

const,let,var的区别

const


		// const b=2;
		/* -1.-会编译时错误-- */
		// const b;//错误,必须初始化
		// console.log('函数外const定义b:'+b);//有输出值2
		/* 2.不可识别遍历b */
		// b=5;
		// console.log('函数外修改定义b:'+b);//报错

总结：const定义的变量不可以修改，而且必须初始化。

let

       let c = 3;
		console.log('函数外let定义c：' + c);

		function a() {
			let c = 9;
			console.log('函数内let定义c：' + c); //输出c=9
		}
		a();
		console.log('函数调用后let定义c不受函数外部定义影响：' + c); //输出c=9

总结： let是块级作用域，函数内部使用let定义后，对函数外部无影响。

var


		 var a = 1;
		console.log('函数外var定义a:' + a); //输入a=1
		function change() {
			a = 4;
			console.log('函数内var定义a:' + a) //输入a=4
		}
		change();
		console.log('函数调用后var定义a为函数内部修改值：' + a); //可以输出a=4

总结： var定义的变量可以修改，如果不初始化会输出undefined，不会报错。

完整案例

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
	</head>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<!-- 1.//确保引入Vue.vue-router的js依赖 -->
	<script src="https://cdn.bootcss.com/vue-router/3.0.7/vue-router.js"></script>
	<body>
		<div id="test">
			<h1>const,let,var的区别</h1>



		</div>

	</body>
	<script type="text/javascript">
		/* const */
		// const b=2;
		/* -1.-会编译时错误-- */
		// const b;//错误,必须初始化
		// console.log('函数外const定义b:'+b);//有输出值2
		/* 2.不可识别遍历b */
		// b=5;
		// console.log('函数外修改定义b:'+b);//报错
		/* 总结：const定义的变量不可以修改，而且必须初始化。 */
		
		
		
		/* var */
		 var a = 1;
		console.log('函数外var定义a:' + a); //输入a=1
		function change() {
			a = 4;
			console.log('函数内var定义a:' + a) //输入a=4
		}
		change();
		console.log('函数调用后var定义a为函数内部修改值：' + a); //可以输出a=4 
		/*总结： var定义的变量可以修改，如果不初始化会输出undefined，不会报错。 */

		/* let */
		let c = 3;
		console.log('函数外let定义c：' + c);

		function a() {
			let c = 9;
			console.log('函数内let定义c：' + c); //输出c=9
		}
		a();
		console.log('函数调用后let定义c不受函数外部定义影响：' + c); //输出c=9
		/*总结： let是块级作用域，函数内部使用let定义后，对函数外部无影响。*/
	</script>
</html>

尽力漂亮

关注

1
点赞
踩
0

收藏

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

文章目录1. SPA是什么2. SPA实现思路和技术点路由思路1、确保引入Vue.vue-router的js依赖2、首先需要定义组件（就是展示不同的页面效果）3、需要将不同的组件放入一个容器中（路由集合）4、将路由集合组装成路由器5、将路由挂载到Vue实例中6、定义锚点7、跳转完整案例const,let,var的区别1. SPA是什么单页Web应用（single page applicatio...
复制链接

扫一扫