vue-router路由的简单使用

最新推荐文章于 2024-01-26 01:36:36 发布

百日梦想家

最新推荐文章于 2024-01-26 01:36:36 发布

阅读量172

点赞数

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

本文链接：https://blog.csdn.net/qq_42418169/article/details/108674251

版权

vue 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

文章目录

下载导入
- 语法实例
router-link
- 用法与作用
- 实例
redirect 重定向
设置路由选中激活样式(active)
- 方式一通过给router-link自带的router-link-active类添加属性
- 方式二通过给router路由对象添加`linkActiveClass`属性
设置路由界面切换动画
router路由传参
- 通过 $route.query来获取参数
- 通过$route.param获取传参（resultful风格）
层级路由（children）
在同一个页面使用多个`router-view`展示多个不同组件

下载导入

导入vue.js
导入vue-router.js 注意：导入vue-router之前一定要导入vue.js

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

语法实例

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Vue Template</title>
		<!-- 第一步导入 Vue.js -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12" type="text/javascript"></script>
		<!-- 第二部导入Vue-router.js -->
		<script src="../js/Vue/vue-router.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<a href="#/login">登录</a>
			<a href="#/register">注册</a>
			
			<!-- 路由容器，用来展示路由页面 由vue-router提供的，用来当作路由展示的占位符 -->
			<router-view></router-view>
		</div>
		
		<template id="login">
			<h1>我是登录模块</h1>
		</template>
		
		<template id="register">
			<h1>我是注册模块</h1>
		</template>
		
		<script type="text/javascript">
			var login={
				template:'#login'
			}
			
			var register={
				template:'#register'
			}
			
			// 注册组件 后面的参数必须是组件对象，而非名称
			Vue.component('login',login)
			Vue.component('register',register)
			
			
			// 注册路由对象
			var routeObject=new VueRouter({
				// 注意此处的属性是routes并非router,注意，注意，注意
				routes:[
					// 在路由规制里面的component属性必须传入是变量，而非名称
					{path:'/login',component:login},
					{path:'/register',component:register}
				]
			})
			
			var vm=new Vue({
				el:'#app',
				data:{},
				methods:{},
				router:routeObject   // 将路由连接到Vue实例上
			})
		</script>
	</body>
</html>

router-link

用法与作用

作用：是Vue提供用来他跳转的标签，类似于a标签，但是比a标签更灵活
to属性指定要路由的页面地址
tag属性指定要渲染成什么标签，如果不指定默认渲染成a标签

		<body>
			<div id="app">
				<!-- to 指定跳转的页面，tag指定当前元素在页面上以什么形式渲染出来，默认a标签 -->
				<router-link to="/login" tag="button" class="btn btn-primary">登录</router-link>
				<router-link to="/register" tag="button" class="btn btn-danger">注册</router-link>
				<!-- 路由容器，用来展示路由页面 由vue-router提供的，用来当作路由展示的占位符 -->
				<router-view></router-view>
			</div>
			
			<template id="login">
				<h1>我是登录模块</h1>
			</template>
			
			<template id="register">
				<h1>我是注册模块</h1>
			</template>
			
			<script type="text/javascript">
				var login={
					template:'#login'
				}
				
				var register={
					template:'#register'
				}
				
				// 注册组件 后面的参数必须是组件对象，而非名称
				Vue.component('login',login)
				Vue.component('register',register)
				
				
				// 注册路由对象
				var routeObject=new VueRouter({
					routes:[
						// 在路由规制里面的component属性必须传入是变量，而非名称
						{path:'/login',component:login},
						{path:'/register',component:register}
					]
				})
				
				var vm=new Vue({
					el:'#app',
					data:{},
					methods:{},
					router:routeObject   // 将路由连接到Vue实例上
				})
			</script>
		</body>

实例

在这里插入图片描述

redirect 重定向

提问： 我们一般进入网站就会直接被路由到login部分，那么这在vue中如何做到了？
解决： vue-router中提供了redirect重定向功能，在路由对象使用redirect属性

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Bootstrap 101 Template</title>
		<!-- 使用bootstrap.css -->
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
		<!-- 导入vue -->
		<script src="../js/Vue/Vue2.6.11.js" type="text/javascript" charset="utf-8"></script>
		<!-- 导入router -->
		<script src="../js/Vue/vue-router.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 使用router-view占位符 -->
			<router-view></router-view>
		</div>
		
		<!-- 注册欢迎界面模板 -->
		<template id="welcome">
			<div class="container">
				<div class="jumbotron">
				  <h1>Hello, world!</h1>
				  <p>...</p>
				  <p><a class="btn btn-primary btn-lg" href="" role="button">Learn more</a></p>
				</div>
			</div>
		</template>
		
		<script type="text/javascript">
			// 创建模板变量
			var temp={
				template:'#welcome'
			}
			
			// 创建路由对象
			var vmRouter=new VueRouter({
				routes:[
					// 使用重定向定义
					{'path':'/','redirect':'/welcome'},
					{'path':'/welcome','component':temp}
				]
			})
			
			var vm=new Vue({
				el:'#app',
				data:{},
				methods:{},
				components:{	// 注册组件
					'welcome':temp
				},
				router:vmRouter	// 将路由与vue实例联系起来
			})
		</script>
	</body>
</html>

效果
注意看地址栏

在这里插入图片描述

设置路由选中激活样式(active)

方式一通过给router-link自带的router-link-active类添加属性

在这里插入图片描述
从上面的图片我们可以看到当我们选中哪一个元素，那个元素身上就会多两个class
router-link-exact-ative
router-link-active
我们可以给router-link-active添加额外的属性以达到效果

<style type="text/css">
			.router-link-active{
				color: #fff;
				background-color: #337ab7;
				border-color: #2e6da4;
				font-size: 40px;
			}
</style>

效果
在这里插入图片描述

方式二通过给router路由对象添加`linkActiveClass`属性

// 创建路由对象
			var routerObj=new VueRouter({
				routes:[
					{path:'/',redirect:'/login'},
					{path:'/login',component:login},
					{path:'/register',component:register}
				],
				// 填写激活应用的类名
				linkActiveClass:'btn btn-danger'
			})

效果
在这里插入图片描述

设置路由界面切换动画

说起动画我们就想起了vue提供的transaction标签，没错，路由界面切换的动画也可以用transaction实现

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Bootstrap 101 Template</title>
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
		<style type="text/css">
			/* 设置before-enter之前的效果，设置leave之后的效果 */
			.v-enter,.v-leave-to{
				opacity: 0;
				transform: translateX(80px);
			}
			/* 设置进场，离场的动画时间 */
			.v-enter-active,.v-leave-active{
				transition: all 1s ease;
			}
		</style>
		<script src="../js/Vue/Vue2.6.11.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/Vue/vue-router.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<router-link to="/login" tag="a" class="">login</router-link>
			<router-link to="/register" tag="a" class="">register</router-link>
			<transition mode="out-in">
				<router-view ></router-view>
			</transition>
		</div>
		<!-- 组件模板 -->
		<template id="login">
			<h2>login model</h2>
		</template>
		
		<template id="register">
			<h2>register model</h2>
		</template>
		<script type="text/javascript">
			// 创建模板变量
			var login={
				template:'#login'
			}
			var register={
				template:'#register'
			}
			// 注册组件
			Vue.component('login',login)
			Vue.component('register',register)
			
			// 创建路由对象
			var routerObj=new VueRouter({
				routes:[
					{path:'/',redirect:'/login'},
					{path:'/login',component:login},
					{path:'/register',component:register}
				],
				linkActiveClass:'btn btn-danger'
			})
			var vm=new Vue({
				el:'#app',
				data:{},
				methods:{},
				router:routerObj
			})
		</script>
	</body>
</html>

效果
在这里插入图片描述

router路由传参

前提在一些场景中我们不只是需要页面切换，更需要知道页面切换所带来那些参数

通过 $route.query来获取参数

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Bootstrap 101 Template</title>
		<script src="../js/Vue/Vue2.6.11.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/Vue/vue-router.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 在跳转连接里面写参数，方便又不用修改路由规制 -->
			<router-link to="/login?title=登录&content=login" tag="a" >登录</router-link>
			<router-link to="/register" tag="a" >注册</router-link>
			
			<router-view></router-view>
		</div>
		
		<!-- 定义模板 -->
		<template id="login">
			<div id="">
				<h1>login</h1>
				<button type="button" @click="getParam">点击获取url参数</button>
				<!-- 在模板中同样可以通过$route.query来获取 -->
				<textarea rows="5" cols="10">{{$route.query.title}}----{{$route.query.content}}</textarea>
			</div>
		</template>
		<template id="register">
			<div id="">
				<h1>register</h1>
				<button type="button">点击获取url参数</button>
			</div>
		</template>
		
		<script type="text/javascript">
			// 定义模板变量
			var login={
				template:'#login',
				methods:{
					getParam:function(){
						// 通过vue提供的$route.query属性来获取参数
						alert(this.$route.query.title+'\n'+this.$route.query.content)
					}
				}

			}
			var register={
				template:'#register'
			}
			// 注册组件
			Vue.component('login',login)
			Vue.component('register',register)
			// 定义路由规则
			var router=new VueRouter({
				routes:[
					{path:'/login',component:login},
					{path:'/register',component:register}
				]
			})
			var vm=new Vue({
				el:'#app',
				data:{},
				methods:{},
				router:router	// 挂载router
			})
		</script>
	</body>
</html>

效果
在这里插入图片描述

通过$route.param获取传参（resultful风格）

代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Bootstrap 101 Template</title>
		<script src="../js/Vue/Vue2.6.11.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/Vue/vue-router.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 占位符 -->
			<router-view></router-view>
		</div>
		
		<!-- 登录模块 -->
		<template id="login">
			<div id="">
				<h2>我是登录模块</h2>
				<!-- 在组件中获取传递过来的参数 -->
				<h2>id:{{$route.params.id}}</h2>
				<h2>name:{{$route.params.name}}</h2>
			</div>
		</template>
		
		<script type="text/javascript">
			// 创建组件对象
			var login={
				template:'#login',
				created:function(){	
					// 在进入路由时展示
					// 通过param来获取参数 $route.params.参数名
					console.log(this.$route)
					alert('id:'+this.$route.params.id+'name:'+this.$route.params.name)
				}
			}
			// 注册组件
			Vue.component('login',login)
			// 注册路由
			var router=new VueRouter({
				routes:[
					{path:'/login/:id/:name',component:login}
				]
			})
			var vm=new Vue({
				el:'#app',
				data:{},
				methods:{},
				router:router	//链接路由
			})
		</script>
	</body>
</html>

结果
在这里插入图片描述

层级路由（children）

为什么需要层级路由？

在很多情况下，我们希望一模块下面需要有很对子模块，但是又要求只能在对应父模块显示，vue就为此提供了层级路由

使用要点

实现模块的子路由，就需要从route的属性children实现
子路由path属性不能写/号，/代表着根路径，子路由会失败
在标签<router-link>中，to属性里面的路径必须从根路径写起
父模块下必须要写<router-view>标签

案例

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Bootstrap 101 Template</title>
		<script src="../js/Vue/Vue2.6.11.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/Vue/vue-router.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<router-link to="/account" tag="a">点击进入账户模块</router-link>
			<router-view></router-view>
		</div>
		
		<!-- 定义account模板 -->
		<template id="account">
			<div id="">
				<h1>我是组件accout模块</h1>
				
				<!-- 子路由在router-link里面的路径必须从根路径写起 -->
				<router-link to="/account/login" tag="a">进入login</router-link>
				<router-link to="/account/register" tag="a">进入register</router-link>
				
				<!-- 定义显示的位置 -->
				<router-view></router-view>
			</div>
		</template>
		
		<!-- 定义login模板 -->
		<template id="login">
			<h2>我是组件login模块</h2>
		</template>
		
		<!-- 定义register模板 -->
		<template id="register">
			<h2>我是组件register模块</h2>
		</template>
		<script type="text/javascript">
			
			// 定义account template 变量
			var account={
				template:'#account'
			}
			
			// 定义login register变量
			var login={
				template:'#login'
			}
			var register={
				template:'#register'
			}
			
			// 注册组件
			Vue.component('account',account)
			Vue.component('login',login)
			Vue.component('register',register)
			
			// 创建路由
			var router=new VueRouter({
				routes:[
					{
						path:'/account',
						component:account,
						children:[		// 使用路由属性children属性来设置层级路由（子路由）
							{path:'login',component:login},		// 注意子路由path不能写‘/’号，‘/’代表着根路径，会直接匹配根路径
							{path:'register',component:register}
						]
					}
				]
			})
			var vm=new Vue({
				el:'#app',
				data:{},
				methods:{},
				router:router	// 注册路由	
			})
		</script>
	</body>
</html>

在这里插入图片描述

在同一个页面使用多个`router-view`展示多个不同组件

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Bootstrap 101 Template</title>
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
		<script src="../js/Vue/Vue2.6.11.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/Vue/vue-router.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app" class="container">
			<div class="row">
				<div class="col-md-12">
					<router-view></router-view>
				</div>
			</div>
			<div class="row">
				<div class="col-md-4">
					<!-- 给router-view指定name属性来达到展示特定的组件 -->
					<router-view name="pageLeft"></router-view>
				</div>
				<div class="col-md-8">
					<!-- 给router-view指定name属性来达到展示特定的组件 -->
					<router-view name="pageMain"></router-view>
				</div>
			</div>
		</div>

		<!-- 创建模板 -->
		<template id="pageTop">
			<div id="">
				<h1 style="background-color: yellow;margin: 0;">上部</h1>
			</div>
		</template>

		<template id="pageLeft">
			<div id="">
				<h1 style="background-color: red; margin: 0;">left</h1>
			</div>
		</template>

		<template id="pageMain">
			<div id="">
				<h1 style="background-color: green; margin: 0;">main</h1>
			</div>
		</template>
		<script type="text/javascript">
			// 创建模板变量
			var pageTop = {
				template: '#pageTop'
			}
			var pageLeft = {
				template: '#pageLeft'
			}
			var pageMain = {
				template: '#pageMain'
			}
			// 注册组件
			Vue.component('pageTop', pageTop)
			Vue.component('pageLeft', pageLeft)
			Vue.component('pageMain', pageMain)
			// 创建路由
			var router = new VueRouter({
				routes: [{
					path: '/',
					components: { // 使用components属性来设置多个组件
						'default': pageTop,
						'pageLeft': pageLeft,
						'pageMain': pageMain
					}
				}]
			})
			// 创建Vue实例
			var vm = new Vue({
				el: '#app',
				data: {},
				methods: {},
				router: router // 挂载路由
			})
		</script>
	</body>
</html>