router路由学习笔记

一、router路由的介绍

router是由vue官方提供的用于实现组件跳转的插件，其目的就是为了简化前端的一些资源跳转交互的一些繁琐操作

二、路由插件的使用（两种方式）

2.1、使用离线方式

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

2.2、使用在线CDN方式使用（前提是网络要好）

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

三、路由学习的简单使用案例

3.1、使用路由流程的三步骤：

第一步、定义连接跳转的模板（组件）
第二步、定义路由
第三步、引用路由

3.2、案例如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>router的使用</title>
		<style type="text/css">
			body{padding: 0px;margin: 0px;}
			ul{list-style: none;}
			ul li{display: inline;float: left;margin-left: 15px;}
			ul li a{text-decoration: none; color: white;font-size: 18px; font-weight: bold;}
		</style>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/vue-router.js"></script>
	</head>
	<body>
		<div id="container">
			<div style="width: 100%; height: 70px; background: #00BFFF;">
				<table>
					<tr>
						<td><img src="img/logo.png" height="70" style="margin-left: 100px;"/></td>
						<td>
							<ul>
								<li><router-link to="/a">首页</router-link></li>
								<li><router-link to="/b">Java</router-link></li>
								<li><router-link to="/c">HTML5</router-link></li>
								<li><router-link to="/d">Python</router-link></li>
								<!-- <li><a href="#">首页</a></li>
								<li><a href="#">Java</a></li>
								<li><a href="#">HTML5</a></li>
								<li><a href="#">Python</a></li> -->
							</ul>
						</td>
					</tr>
				</table>				
			</div>
			<div style="width: 100; height: 680px; background: lemonchiffon;">
				<router-view></router-view>
			</div>
		</div>
		<script type="text/javascript">
			//vue的路由旨在为单页面应用开发提供便捷
			
			//第一步、定义连接跳转的模板（组件）
			const t1={template:`<p>index</p>`};
			const t2={template:`<p>Java</p>`};
			const t3={template:`<p>HTML5</p>`};
			const t4={template:`<p>Python</p>`};
			
			//第二步、定义路由
			const myrouter=new VueRouter({
				routes:[
					{path:"/a",component:t1},
					{path:"/b",component:t2},
					{path:"/c",component:t3},
					{path:"/d",component:t4}
				]
			});
			//第三步、引用路由
			var vm=new Vue({
				el:"#container",
				router:myrouter
			});			
		</script>
	</body>
</html>

四、动态路由匹配

4.1、通配符

可以匹配任意路径

例如：

"/user-*"匹配所有以"user-"开头的任意路径
"/*"匹配所有路径

const myrouter=new VueRouter({
routes:[
{path:"/user-*",component:...},
{path:"/*",component:...}
]
});

注意：如果使用通配符定义路径，需要注意路由声明的顺序

4.2、路由参数

<div id="container">
    <li><router-link to="/a/101">首页</router-link></li>
    <router-view></router-view>
</div>
<script type="text/javaScript">
    const t1={template:`<p>index:{{$route.params.id}}</p>`}
    const myrouter=new VueRouter({
        routes:[
            {path:"/a/:id",component:t1}
        ]
    });
    
    var vm=new Vue({
        el:"#container",
        router:myrouter
        
    });
</script>

4.3、优先级问题

如果一个路径匹配了多个路由，则按照陆游的配置孙旭：路由定义的越早优先级就越高

五、嵌套路由

5.1、说明

所谓嵌套路由就是在一级别路由中相显示二级路由

5.2、案例如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>嵌套路由的使用</title>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/vue-router.js"></script>
		
		
		
	</head>
	<body>
		<div id="container">
			<router-link to="/a">首页</router-link>
			<router-link to="/a/c1">首页-1</router-link>
			<router-link to="/a/c2">首页-2</router-link>
			<router-view></router-view>
			
		</div>
		
		<script type="text/javascript">
			const t1={template:"<div style='width:400px;hright:200px;border:blue 1px solid'>index<hr/><router-view></router-view></div>"};
			
			const t2={template:`<div>t2</div>`};
			const t3={template:`<div>t3</div>`};
			
			const myrouter =new VueRouter({
				routes:[
					{
						path:"/a",
						component:t1,
						children:[
							{path:"c1",
							component:t2
							},
							{path:"c2",
							component:t3
							}
							
						]
					}
					
				]
			});
			
			var vm=new Vue({
				el:"#container",
				router:myrouter
			});
			
		</script>
	</body>
</html>

六、编程式导航

6.1、案例演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>嵌套路由的使用</title>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/vue-router.js"></script>	
	</head>
	<body>
		<div id="container">
			<button type="button" @click="test">按钮</button>
			<!-- <router-link to="/a">首页</router-link> -->
			<router-view></router-view>		
		</div>		
		<script type="text/javascript">
			const t1={template:"<div style='width:400px;hright:200px;border:blue 1px solid'>index</div>"};						
			
			const myrouter =new VueRouter({
				routes:[
					{
						path:"/a",
						component:t1						
					}		
				]
			});			
			var vm=new Vue({
				el:"#container",
				router:myrouter,
				methods:{
					test:function(){
						//路由跳转，由js代码实现路由跳转 便成为编程式导航
						myrouter.push("/a");
					}
				}
			});		
		</script>
	</body>
</html>

6.2、了解push（）的参数

<!--两种语法-->
<!--语法一、-->
myrouter.push("/a");
<!--语法二、-->
myrouter.push({pash:"/a"});

6.3、常用的push（）使用方式

var vm=new Vue({
				el:"#container",
				router:myrouter,
				methods:{
					test:function(){
						//路由跳转，由js代码实现路由跳转 便成为编程式导航
						//myrouter.push("/a");
						//2、对象
						//myrouter.push({path:"/a"});
						//3、命名的路由 name 参数指的是定义路由时指定的名字
						//myrouter.push({name:"r1",params:{id:101}});
						//url传参用的比较少
						myrouter.push({path:"/a",query::{id:101}});
					}
				}
			});