前端框架vue.js系列（13）：路由-优快云博客

本文详细介绍了如何使用vue-router实现单页面应用的路由功能，包括路由配置、组件定义及使用router-link和router-view进行导航和视图展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

路由是指实现单页面的效果，它需要使用到 vue-router.js，可以到官网去下载，vue-router.js要与vue.js版本一致，若使用vue脚手架将自带路由功能。

参考demo：

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>vue路由</title>
		<script src="../js/libs/vue/2.4.2/vue.min.js"></script>
		<script src="../js/libs/vue/2.4.2/vue-router.js"></script>
	</head>

	<body>
		<div id="box">
			<div>
				<router-link to="/home">主页</router-link>
				<router-link to="/news">新闻</router-link>
				<router-link to='/about'>关于</router-link>
			</div>
			<div>
				<router-view></router-view>
			</div>
		</div>

		<script>
			//组件
			var Home = {
				data: function() {
					return {
						pop: "主页"
					}
				},
				template: '<h3>我是{{pop}}</h3>'
			};
			var News = {
				data: function() {
					return {
						pop: "新闻"
					}
				},
				template: '<h3>我是{{pop}}</h3>'
			}
			var About = {
				data: function() {
					return {
						pop: "关于"
					}
				},
				template: '<h3>我是{{pop}}</h3>'
			}
			//配置路由
			var routes = [{
					path: '/home',
					component: Home
				},
				{
					path: '/news',
					component: News
				},
				{
					path: '/about',
					component: About
				},
				//重定向
				{
					path: '*',
					redirect: '/home'
				}
			]
			//生成路由实例
			const router = new VueRouter({
				routes
			})
			//挂载到vue上
			new Vue({
				router,
				el: '#box'
			})
		</script>
	</body>

</html>

转载于:https://my.oschina.net/u/3987720/blog/2962722