027_vue路由

最新推荐文章于 2025-04-11 16:31:49 发布

自由与束缚JavaJavaScript

最新推荐文章于 2025-04-11 16:31:49 发布

阅读量168

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/122900434

版权

vue 专栏收录该内容

36 篇文章

订阅专栏

1. 后端路由

1.1. 概念: 根据不同的用户URL请求, 返回不同的内容。

1.2. 本质: URL请求地址与服务器资源之间的对应关系。

2. SPA(Single Page Application)

2.1. 后端渲染, 存在性能问题。

2.2. Ajax前端渲染, 提高前端渲染性能, 但是不支持浏览器的前进和后退操作。

2.3. SPA(Single Page Application)单页面应用程序: 整个网站只有一个页面, 内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退。

2.4. SPA实现原理之一: 基于URL地址的hash, hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求。

2.5. 在实现SPA过程中, 最核心的技术点就是前端路由。

3. 前端路由

3.1. 概念: 根据不同的用户事件, 显示不同的页面内容。

3.2. 本质: 用户事件与事件处理函数之间的对应关系。

4. 通过window的onhashchange事件实现简易前端路由

4.1. 基于URL中的hash实现, 点击菜单的时候改变URL的hash, 根据hash的变化控制组件的切换。

4.2. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>通过window的onhashchange事件实现简易前端路由</title>
	</head>
	<body>
		<div id="app">
			<!-- 切换组件的超链接 -->
	      	<a href="#/zhuye">主页</a> 
	      	<a href="#/keji">科技</a> 
	      	<a href="#/caijing">财经</a>
	      	<a href="#/yule">娱乐</a>

	      	<!-- 根据 :is 属性指定的组件名称, 把对应的组件渲染到component标签所在的位置 -->
	      	<!-- 可以把component标签当做是[组件的占位符] -->
	      	<component :is="comName"></component>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			// 定义需要被切换的4个组件
	      	// 主页组件
	      	const zhuye = {
	        	template: '<h1>主页信息</h1>'
	      	};

	      	// 科技组件
	      	const keji = {
	        	template: '<h1>科技信息</h1>'
	      	};

	      	// 财经组件
	      	const caijing = {
	        	template: '<h1>财经信息</h1>'
	      	};

	      	// 娱乐组件
	      	const yule = {
	        	template: '<h1>娱乐信息</h1>'
	      	};

			var vm = new Vue({
				el: "#app",
				data: {
					comName: 'zhuye'
				},
				components: {
					zhuye,
		          	keji,
		          	caijing,
		          	yule
				}
			});

			// 监听window的onhashchange事件, 根据获取到的最新的hash值, 切换要显示的组件的名称
      		window.onhashchange = function() {
	        	// 通过location.hash获取到最新的hash值
	        	switch(location.hash.slice(1)){
	          		case '/zhuye':
	            		vm.comName = 'zhuye';
	          		break;
	          		case '/keji':
	            		vm.comName = 'keji';
	          		break;
	          		case '/caijing':
	            		vm.comName = 'caijing';
	          		break;
	          		case '/yule':
	            		vm.comName = 'yule';
	          		break;
	        	}
	      	}
		</script>
	</body>
</html>

4.3. 效果图

5. Vue Router

5.1. Vue Router是Vue官方路由管理器。它和Vue.js的核心深度集成, 可以非常方便的用于SPA应用程序的开发。

5.2. Vue Router包含的功能:

5.2.1. 支持html5历史模式或hash模式。

5.2.2. 支持嵌套路由。

5.2.3. 支持路由参数。

5.2.4. 支持编程式路由。

5.2.5. 支持命名路由。

6. Vue Router基本使用步骤

6.1. 引入相关的库文件。

<!-- 导入vue文件 -->
<script type="text/javascript" src="vue.min.js"></script>
<!-- 导入vue-router -->
<script type="text/javascript" src="vue-router_3.0.2.js"></script>

6.2. 添加路由链接。

<!-- router-link是vue中提供的标签, 默认会被渲染为a标签 -->
<!-- to属性默认会被渲染为href属性 -->
<!-- to属性的值默认会被渲染为#开头的hash地址 -->
<router-link to="/zhuye">zhuye</router-link>
<router-link to="/keji">keji</router-link>

6.3. 添加路由填充位。

<!-- 路由填充位, 又叫做路由占位符。将来通过路由规则匹配到的组件, 将会被渲染到router-view所在的位置。 -->
<router-view></router-view>

6.4. 定义路由组件。

// 定义路由组件
var zhuye = {
	template: '<h1>主页信息</h1>'
};
var keji = {
	template: '<h1>科技信息</h1>'
};

6.5. 配置路由规则并创建路由实例。

// 创建路由实例对象
var router = new VueRouter({
	// 所有的路由规则
	routes: [
		// 每个路由规则都是一个匹配对象, 其中至少包含path和component两个属性。
		// path表示当前路由规则匹配的hash地址。
		// component表示当前路由规则对应要展示的组件。
		{ path: '/zhuye', component: zhuye },
		{ path: '/keji', component: keji }
	]
});

6.6. 把路由挂载到Vue根实例中。

var vm = new Vue({
	el: "#app",
	// 挂载路由实例对象
	// router: router
	router
});

6.7. 路由重定向指的是: 用户在访问地址A的时候, 强制用户跳转到地址C, 从而展示特定的组件页面; 通过路由规则的redirect属性, 指定一个新的路由地址, 可以很方便地设置路由重定向。

// 创建路由实例对象
var router = new VueRouter({
	// 所有的路由规则
	routes: [
		// 每个路由规则都是一个匹配对象, 其中至少包含path和component两个属性。
		// path表示当前路由规则匹配的hash地址。
		// component表示当前路由规则对应要展示的组件。
    // 重定向path: '/'表示原地址, redirect表示将要被重定向到的新地址。
		{ path: '/', redirect: '/zhuye' },
		{ path: '/zhuye', component: zhuye },
		{ path: '/keji', component: keji }
	]
});

6.8. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue-router的基本使用</title>
	</head>
	<body>
		<div id="app">
			<!-- router-link是vue中提供的标签, 默认会被渲染为a标签 -->
			<!-- to属性默认会被渲染为href属性 -->
			<!-- to属性的值默认会被渲染为#开头的hash地址 -->
			<router-link to="/zhuye">zhuye</router-link>
      		<router-link to="/keji">keji</router-link>

      		<!-- 路由填充位, 又叫做路由占位符。将来通过路由规则匹配到的组件, 将会被渲染到router-view所在的位置。 -->
      		<router-view></router-view>
		</div>
		
		<!-- 导入vue文件 -->
		<script type="text/javascript" src="vue.min.js"></script>
		<!-- 导入vue-router -->
		<script type="text/javascript" src="vue-router_3.0.2.js"></script>
		<script type="text/javascript">
			// 定义路由组件
			var zhuye = {
	        	template: '<h1>主页信息</h1>'
	      	};
	      	var keji = {
	        	template: '<h1>科技信息</h1>'
	      	};

	      	// 创建路由实例对象
      		var router = new VueRouter({
        		// 所有的路由规则
        		routes: [
        			// 每个路由规则都是一个匹配对象, 其中至少包含path和component两个属性。
        			// path表示当前路由规则匹配的hash地址。
        			// component表示当前路由规则对应要展示的组件。
        			// 重定向path: '/'表示原地址, redirect表示将要被重定向到的新地址。
        			{ path: '/', redirect: '/zhuye' },
          			{ path: '/zhuye', component: zhuye },
          			{ path: '/keji', component: keji }
        		]
     		});

			var vm = new Vue({
				el: "#app",
				// 挂载路由实例对象
        		// router: router
        		router
			});
		</script>
	</body>
</html>

6.9. 效果图