vue路由步骤

最新推荐文章于 2023-05-05 14:25:12 发布

江西昊仔

最新推荐文章于 2023-05-05 14:25:12 发布

阅读量150

点赞数

分类专栏：达内学习文章标签： vue

本文链接：https://blog.csdn.net/lyh1023812/article/details/118486859

版权

达内学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

路由简单的理解就是—映射

1.步骤

在这里插入图片描述

2.原始代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue路由机制</title>
	<body>
		<div id="app">
			<!-- 2.定义路由链接
				router-link 解析之后,变为a标签.
				to 解析之后, 变为href属性
			 -->
			<router-link to="/user">用户</router-link>
			<router-link to="/dog">狗狗</router-link>
			
			<!-- 3.定义路由填充位 该位置用来展现具体页面(组件) -->
			<router-view></router-view>
			
			
		</div>
		
		<!-- 4.2 定义组件模版 -->
		<template id="userTem">
			<div>
				<h1>我是组件的内容!!!!!</h1>
			</div>
		</template>
		
		<template id="dogTem">
			<div>
				<h1>养只宠物狗</h1>
			</div>
		</template>
		
		
		
		
		<!-- 1.引入vue.js -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<!-- 1.导入路由JS 注意顺序-->
		<script src="../js/vue-router.js"></script>
		<script>
			//4.定义组件
			let user = {
				//4.1定义页面
				template: "#userTem"
			}
			
			let dog = {
				template: "#dogTem"
			}
			
			
			
			//5.创建路由对象,定义路由规则
			let router = new VueRouter({
				//定义路由规则
				routes: [
						/* 
							利用redirect实现路由重定向
						 */
						{path: "/", redirect: "/dog"},
						{path: "/user", component: user},
						{path: "/dog", component: dog}
				]
			})
			
			//6.将路由对象交给Vue对象管理
			const vue = new Vue({
				el: "#app",
				//绑定路由
				//router: router  名称一致时,可以简化
				router
			})
			
		</script>
	</body>
</html>

3.路由嵌代码

要点：映射中的children属性，写嵌套的映射。

{path: “/dog”, component: dog, children: [
{path: “/dog/samo”, component: samo},
{path: “/dog/hsq”, component: hsq}
]}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue路由机制</title>
	<body>
		<div id="app">
			<!-- 2.定义路由链接
				router-link 解析之后,变为a标签.
				to 解析之后, 变为href属性
			 -->
			<router-link to="/user">用户</router-link>
			<router-link to="/dog">狗狗</router-link>
			
			<!-- 3.定义路由填充位 该位置用来展现具体页面(组件) -->
			<router-view></router-view>
			
			
		</div>
		
		<!-- 4.2 定义组件模版 -->
		<template id="userTem">
			<div>
				<h1>我是组件的内容!!!!!</h1>
			</div>
		</template>
		
		<template id="dogTem">
			<div>
				<h1>养只宠物狗</h1>
				<!-- 定义子组件路由 -->
				<router-link to="/dog/samo">萨摩耶</router-link>
				<router-link to="/dog/hsq">哈士奇</router-link>
				<!-- 定义子组件占位符 -->
				<router-view></router-view>
			</div>
		</template>
		
		<!-- 1.引入vue.js -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<!-- 1.导入路由JS 注意顺序-->
		<script src="../js/vue-router.js"></script>
		<script>
			//4.定义组件
			let user = {
				//4.1定义页面
				template: "#userTem"
			}
			
			let dog = {
				template: "#dogTem"
			}
			
			let samo = {
				template: `<h1>通体雪白的神兽</h1>`
			}
			
			let hsq = {
				template: `<h1>拆家狂魔</h1>`
			}
			
			
			
			
			
			//5.创建路由对象,定义路由规则
			let router = new VueRouter({
				//定义路由规则
				routes: [
						/* 
							利用redirect实现路由重定向
						 */
						{path: "/", redirect: "/dog"},
						{path: "/user", component: user},
						{path: "/dog", component: dog, children: [
							{path: "/dog/samo", component: samo},
							{path: "/dog/hsq", component: hsq}
						]},
						/*该请求是/目录下的请求,所以组件渲染也在根组件 */
						/* {path: "/dog/samo", component: samo},
						{path: "/dog/hsq", component: hsq}, */
						
				]
			})
			
			//6.将路由对象交给Vue对象管理
			const vue = new Vue({
				el: "#app",
				//绑定路由
				//router: router  名称一致时,可以简化
				router
			})
			
		</script>
	</body>
</html>