vue单页面组件+路由

最新推荐文章于 2025-04-22 10:05:01 发布

欧阳(๑°3°๑)俊杰

最新推荐文章于 2025-04-22 10:05:01 发布

阅读量500

点赞数

CC 4.0 BY-SA版权

文章标签： vue Vue路由 router-link

本文链接：https://blog.csdn.net/weixin_42221197/article/details/101049557

Vue开发版link CND: https://cdn.jsdelivr.net/npm/vue/dist/vue.js
Vue生产版link CND:https://cdn.jsdelivr.net/npm/vue
Vue路由link CND:https://unpkg.com/vue-router@2.0.0/dist/vue-router.js

将Vue和Vue-router导入项目中;

编写代码:
编写路由文件,每一个js文件对应一个路由,路由名称首字母大写
ha.js

const Ha = {template:'<div>HaHa</div>'};

my.js

const My = {template:'<div>mymy</div>'};

配置路由 router.js

router = new VueRouter({
	routes: [{
			path: '/my',
			component: My
		},
		{
			path: '/ha',
			component: Ha
		}
	],
});

在html中引入上述文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="vue-router.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<router-link to="my">ouyang</router-link>
			<router-link to="ha">haha</router-link>
			<router-view></router-view>
		</div>
	</body>
	<script type="text/javascript" src="router/my.js"></script>
	<script type="text/javascript" src="router/ha.js"></script>
	<script type="text/javascript" src="router.js"></script>
	<script type="text/javascript">
		let vm = new Vue({
			el:'#app',
			router
		})
	</script>
</html>

文件引入顺序不能错,先Vue、vue-router、组件js、路由js；
在js中将在router.js中定义的router配置到vue中
router-view标签用于展示路由内容
router-link标签用于跳转路由，to属性指定跳转哪一个路由。

效果图：
在这里插入图片描述
点击My

点击HA

分析得知，vue将router-link标签映射成一个a标签，to属性中的路径映射成a标签的href属性，点击后url发成了改变，vurrouter根据路径选择定义好的路由对应的组件显示；