Vue路由基础用法

最新推荐文章于 2024-07-23 16:00:30 发布

迟早嘚秃

最新推荐文章于 2024-07-23 16:00:30 发布

阅读量88

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_54067126/article/details/121096695

版权

路由

我们知道vue中的所有的html代码都是写在一个页面的
那么我们如何进行页面跳转呢
今天我们就来解决这个问题
1、确保引入Vue.vue-router的js依赖
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、确保引入Vue.vue-router的js依赖-->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
	</head>
	<body>
		<div id='app'>
			<!--6、定义锚点-->
			<router-link to="/" replace>博客</router-link>
			<router-link to="/Abort">关于本站</router-link>
			<!--7、跳转-->
			<router-view></router-view>
		</div>
	</body>
	<script type="text/javascript">
		//2.创建组件
		const Home = Vue.extend({
			template: "<div><p>博客内容</p></div>"
		});
		const Abort = Vue.extend({
			template: "<div><p>关于本站</p></div>"
		});
		//3.添加组件映射关系(需要将不同的组件放入一个容器中（路由集合）)
		let routes = [{
				path: '/',
				component: Home
			},
			{
				path: '/Home',
				component: Home
			},
			{
				path: '/Abort',
				component: Abort
			}
		]
		//4.将路由的集合组成路由器
		const router = new VueRouter({
			routes
		});
		new Vue({
			el: '#app',
			//5、将路由挂载到Vue实例中
			router,
			data() {
				return {
					msg: 'vue'
				}
			}
		})
	</script>
</html>