Vue学习-路由（七）

最新推荐文章于 2024-07-24 13:32:03 发布

CTH—成长之路

最新推荐文章于 2024-07-24 13:32:03 发布

阅读量343

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_42562636/article/details/109066859

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue Router的基本用法，包括router-link的to属性用于路径导航，router-view作为路由载体，以及通过transition实现动画效果。同时展示了如何设置路由参数，以及在路由布局中使用多个router-view进行组件的嵌套展示。此外，还提到了路由的重定向、监听路由变化以及路由的命名视图等高级特性。

摘要由CSDN通过智能技术生成

效果：在这里插入图片描述

路由
router-link标签路由路径，to代表路由路径，传参方式跟a链接相同（通过{{$route.query.userName}}取值），而路由路径对应的是组件
router-view代表路由体若没起name 则公用一个路由体（下面路由布局有介绍name的使用）

<div id="app">
	<router-link to="/login?userName=cth">登录</router-link>
	<router-link to="/register">注册</router-link>
	<!-- 路由体 -->
	<transition mode="in-out" 
	enter-active-class="slideInRight" 
	leave-active-class="lightSpeedOut">
		<router-view class="animated" name=''></router-view>
	</transition>
</div>

var login = {
	template :'<h2>这是登录页面---{{$route.query.userName}}<h2/>'
}
var register = {
	template: '<router-link to="/register/registerse">注册子路由</router-link>',
}
var loginse = {
	template : '<h4>登录页面的子路由</h4>'
}
var registerse = {
	template : '<h4>注册页面的子路由</h4>'
}
var routerdemo = new VueRouter({
	/* 路由规则
		每个路由规则都是一个对象，有两个属性
		属性1：path 路由地址
		属性2：compontent 如果path匹配 则展示对应的组件
	*/
	routes:[
	   {
		   path : '/',
		   redirect : '/login'//路由为空时 重定向到loginHtml组件
	   },
	   {
		   path : '/login',
		   component : login,
	   },
	   {
		   path : '/register',
		   component : register	,
		   children:[
			   {
				   path:'registerse',
				   components:[
					   {
						   'registerse':registerse
					   }
				   ]
			   }
		   ]
	   },
	],
	linkActiveClass:'linkActive'
})
var Vue = new Vue({
	el : '#app',
	data:{
		flag : true,
		flag1 : true 
	},
	components:{
		login,register,loginse,registerse
	},
	router:routerdemo,
	//监听路由的改变
	watch:{
		'$route.path':function(newVal,oldVal){
			console.log(this.$route.path)
		}
	}
})

路由布局

<div id="app">
	<router-view></router-view>
	<div class="bottomBox">
		<router-view name="left"></router-view>
		<router-view name="content"></router-view>
	</div>
</div>

var headerBox = {
	template: '<h2 class="headerBox">headerBox</h2>'
}
var leftBox = {
	template: '<h2 class="leftBox">leftBox</h2>'
}
var contentBox = {
	template: '<h2 class="contentBox">contentBox</h2>'
}
//路由
var routerbox = new VueRouter({
	routes: [{
		path: '/',
		components: {
			//格式---'路由name' ：组件
			'default': headerBox,//路由体不写name时 默认headerBox组件
			'left': leftBox,
			'content': contentBox
		}
	}],
})
var Vue = new Vue({
	el: '#app',
	data: {},
	//路由
	router: routerbox,
	//组件
	components: {
		headerBox,leftBox,contentBox
	}
})