vue路由

什么是vue路由？

 

VUE中的路由: 根据用户的请求URL地址,展现特定的组件(页面)信息. (控制用户程序跳转过程)

效果：在不同的选择下展示不同的展示页面，不同的选择会更改网页的URL信息，加载不同的组件

 实现步骤

1. 引入JS类库
2. 指定路由跳转链接
3. 指定路由填充位
4. 封装路由对象
5. 定义路由组件
6. 展示路由内容

1.引入JS类库

        <script src="./js/vue.js"></script>
        <script src="./js/vue-router.js"></script>

注意：vue.js要优先于vue-router.js的加载！！！！！！！！！

2.指定路由跳转链接

        在vue渲染区中设置跳转的链接

在编程时采用router-link，但在解析时会最终解析为a标签 ， to最终解析之后变成herf标签

采用指定路由跳转链接： <router-link to="/home">主页</router-link>     

采用指定网址跳转链接<a href="https://www.baidu.com">百度</a>

        <div id="app">
			<h1>路由的实现案列</h1>
			<!-- 定义路由标签 -->
			<!-- a的标签说明
				a标签 超链接标签
				href属性：请求跳转的链接地址
			 -->
			<a href="https://www.baidu.com">百度</a>
			<!-- 2.创建路由器标签 -->
			<!-- router-link 解析为a标签 
				 to 解析之后变成 herf标签
				-->
			<router-link to="/hand">头</router-link>
			<router-link to="/body">身体</router-link>
			<router-link to="/leg">双腿</router-link>
			<!-- 3.指定路由的填充位 (占位符)-->
			<!-- 需要给组件一个展现的位置，需要提前定义 -->
			<router-view></router-view>
		</div>
		

3.指定路由填充位

在vue对象中添加router路由对象

如果在JS中key-value一样的.可以只写一个，可以将router:router简写为router

			// 实现路由对象的绑定
			const app = new Vue({
				el:"#app",
                //router:router
				//key: value
				//如果在JS中key-value一样的.可以只写一个
				router
			})

4.封装路由对象

定义组件与请求的映射关系，

//4.封装路由对象
            /* 
                1.如果需要在App根标签中跳转,则写到routes根目录下
                2.如果需要进行父子嵌套,则应该使用children属性
                3.如果使用children属性,则在自身的router-view展现数据
             */
            let router = new VueRouter({
            //定义组件与请求的映射关系
            routes:[
                //定义组件的默认展示"/"表示主路径，默认展示位“/leg”的网页
                //不写则默认展示主页面，未选择的情况，组件不生效
                {path:"/",redirect:"/leg"},
                {path:"/hand",component:handCom},
                {path:"/body",component:bodyCom},
                {path:"/leg",component:legCom,
                <!-- 子级应该在该区域展现数据!!!! -->
                    children:[
                        {path:"/leg/leftLeg",component:leftLegCom},
                        {path:"/leg/rightLeg",component:rightLegCom}
                    ]
                }
            ]
        })

添加 {path:"/",redirect:"/leg"},设置重定向，默认展示/leg页面

不添加默认显示，展示未选择的主页面

因为封装的路由对象要加载路由组件，需要在封装之上定义路由组件

5.定义路由组件

写在script中，且在封装路由对象之前

//在封装路由之上定义路由组件
		let handCom={
			template:"#handTem"
		}
		let bodyCom={
			template:"#bodyTem"
		}
		let legCom={
			template:"#legTem"
		}
        //leg组件的子组件leftLeg和rightLeg
		let leftLegCom={
			template:"#leftLegTem"
		}
		let rightLegCom={
			template:"#rightLegTem"
		}
		

 路由组件需要加载组件展示框架，需要在body中编写对应的展示框架

6.展示路由内容

 写在body中，编写对应的展示框架

		<template id="handTem">
			<div >我来组成头部</div>
		</template>
		
		<template id="bodyTem">
			<div >我来组成身体</div>
		</template>
		
		<template id="legTem">
            <!-- 实现路由的嵌套机制 -->
			<div ><h1>我来组成双腿</h1>
			<h3>
				<router-link to="/leg/leftLeg">左腿</router-link>
				<router-link to="/leg/rightLeg">右腿</router-link>
			    <!-- 指定子路由的填充位 (占位符)-->
			    <!-- 需要给组件一个展现的位置，需要提前定义 -->
                <!-- 子级应该在该区域展现数据!!!! -->
				<router-view></router-view>
			</h3>
			</div>
		</template>
		<template id="leftLegTem">
			<div >我来组成左腿</div>
		</template>
		<template id="rightLegTem">
			<div >我来组成右腿</div>
		</template>

总结

编写vue路由时，首先引入JS类库可以根据需求，先设定指定路由跳转链接。在body底层创建之后创建<script>代码区，建立vue对象，并在vue对象中指定路由填充位。之后逐级往上编写。封装由对象路，根据对象建立组件，根据组件设定展示组件内容。