vue路由

最新推荐文章于 2024-07-11 10:59:33 发布

欣宇不会敲代码

最新推荐文章于 2024-07-11 10:59:33 发布

阅读量79

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/leixinyuya/article/details/121095599

版权

一、课程目标

1、spa是什么

单页web应用，就是只有一个web页面的应用，是加载单个HTML页面，并在用户程序交互时动态更新该页面的web应用程序

单页面应用程序

只有第一次会加载页面，以后的每次请求，仅仅是获取必要的数据，然后，由页面中js解析获取的数据，展示在页面中

传统多页面应用程序；

对于传统的多页面应用程序来说，每次请求服务器返回的都是一个完整的页面

优势

减少了请求体积，加快页面响应速度，减低了对服务器的压力

更好的用户体验，让用户在web APP感受native APP的流畅

2、spa实现思路和技术点

ajax

锚点的使用

hashchang事件window.addEventListener("hashchange",function() {})

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

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

3、路由思路

3.1确保引入vue.vue-router的js依赖

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

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

3.4将路由集合组装成路由器

3.5将路由挂载到vue实例中

3.6定义锚点

3.7跳转

二、路由

vue官网

BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务https://www.bootcdn.cn/搜索vue-router

选择版本2.6.0

然后选择vue-router.js

1、引入路由的js依赖 2.6.0

2、定义需求中需要用到的组件

3、定义路由跳转路径

4、得到路由对象

5、将路由与vue实例进行绑定

6、定义组件存放的位置，定义锚点

7、路由组件跳转触发点

代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<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>
	</head>
	<body>
		<!-- 定义边界 -->

		<div id="app">
			<!-- 7、路由组件跳转触发点-->
			<router-link to="/Home" >首页</router-link>
			<router-link to="/About">关于本站</router-link>
			<!-- 6、定义组件存放的位置，定义锚点-->
			<router-view></router-view>
		</div>
	</body>

	<script type="text/javascript">
		//2、定义需求中需要用到的组件
		//const也是es6写法，代表了该变量是对象
		const Home = Vue.extend({
			template: "<div><p>这是博客内容页面</p><div>具体的博客内容</div></div>"
		});
		const About = Vue.extend({
			template: "<div><p>这是关于本站的页面</p><div>本站的意义，发展史，未来的规划</div></div>"
		});
		//3、定义路由跳转路径
		let routes = [{
			path: '/',
			component: Home
		}, {
			path: '/Home',
			component: Home
		}, {
			path: '/About',
			component: About
		}];
		//4、得到路由对象
		const router = new VueRouter({
			routes
		});

		// 绑定边界 ES6具体体现
		new Vue({
			el: '#app',
			//5、将路由与vue实例进行绑定
			router,
			data() {
				return {
					msg: '欢迎小猪佩奇'
				};
			}
		})
	</script>
</html>

运行结果：

三、无痕浏览

欣宇不会敲代码

关注

0
点赞
踩
1

收藏

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

一、课程目标1、spa是什么单页web应用，就是只有一个web页面的应用，是加载单个HTML页面，并在用户程序交互时动态更新该页面的web应用程序单页面应用程序只有第一次会加载页面，以后的每次请求，仅仅是获取必要的数据，然后，由页面中js解析获取的数据，展示在页面中传统多页面应用程序；对于传统的多页面应用程序来说，每次请求服务器返回的都是一个完整的页面优势减少了请求体积，加快页面响应速度，减低了对服务器的压力更好的用户体验，让用户在web APP感受native APP的
复制链接

扫一扫