Vue路由

最新推荐文章于 2024-09-11 17:04:07 发布

一条可有可无的咸鱼

最新推荐文章于 2024-09-11 17:04:07 发布

阅读量80

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44962939/article/details/117693492

版权

Vue 专栏收录该内容

3 篇文章

订阅专栏

1、包的导入顺序
在这里插入图片描述
2、前端路由代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
**<!-- 1、定义 -->**
			<router-link to="home">家</router-link>
			<router-link to="dog">狗</router-link>
			<router-view></router-view>
		</div>
		<template id="homeTem">
			<div>
				<h1>这是家</h1>
			</div>
		</template>
		<template id="dogTem">
			<div >
				<h1>这是个狗</h1>
			</div>
		</template>
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
		<script>
// 2、定义组件
			let homeCom={
				template:"#homeTem"
			}
			let dogCom={
				template:"#dogTem"
			}
//3、实现请求与路由的绑定，定义路有你对象
			// routes、:是一个数组结构,数组中包含对象的结构
			// path :拦截请求的路径名称
			// component：组件名称
			const router=new VueRouter({
				routes:[{path:"/home",component:homeCom},
				{path:"/dog",component:dogCom}]
			})
// 4、将对象和路由进行绑定
			const app=new Vue({
				el:"#app",
				router
			})
		</script>
	</body>
</html>

5、路由重定向

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 1、定义 -->
			<router-link to="home">家</router-link>
			<router-link to="dog">狗</router-link>
			<router-link to="zoom">动物园</router-link>
			<router-view></router-view>
		</div>
		<template id="homeTem">
			<div>
				<h1>这是家</h1>
			</div>
		</template>
		<template id="dogTem">
			<div >
				<h1>这是个狗</h1>
			</div>
		</template>
		<template id="zoomTem">
			<div >
				<h1>这是动物园</h1>
				<router-link to="/zoom/lion">狮子</router-link>
				<router-link to="/zoom/tiger">老虎</router-link>
				<router-view></router-view>
			</div>
		</template>
		<template id="lion">
			<div>
				<h1>我是动物园的小狮子</h1>
			</div>
		</template>
		<template id="tiger">
			<div>
				<h1>我是动物园的大老虎</h1>
			</div>
		</template>
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
		<script>
			// 2、定义组件
			let homeCom={
				template:"#homeTem"
			}
			let dogCom={
				template:"#dogTem"
			}
			let zoomCom={
				template:"#zoomTem"
			}
			let liomCom={
				template:"#lion"
			}
			let tigerCom={
				template:"#tiger"
			}
			//3、实现请求与路由的绑定，定义路有你对象
			// routes、:是一个数组结构,数组中包含对象的结构
			// path :拦截请求的路径名称
			// component：组件名称
			const router=new VueRouter({
				routes:[
					{path:"/",redirect:"/dog"},
					{path:"/home",component:homeCom},
					{path:"/dog",component:dogCom},
					{path:"/zoom",component:zoomCom,children:[
					{path:"/zoom/lion",component:liomCom},{path:"/zoom/tiger",component:tigerCom}]}
					]
			})
			// 4、将对象和路由进行绑定
			const app=new Vue({
				el:"#app",
				router
			})
		</script>
	</body>
</html>

在这里插入图片描述