VUE—从入门到飞起（五）

冷不防 2023-02-21 02:25 18阅读 0赞

**目录**

路由

路由基本使用

路由规则中定义参数

路由嵌套

命名视图实现经典布局

--------------------

[VUE—从入门到飞起（一）][VUE]

[VUE—从入门到飞起（二）][VUE 1]

[VUE—从入门到飞起（三）][VUE 2]

[VUE—从入门到飞起（四）][VUE 3]

[VUE—从入门到飞起（五）][VUE 4]

# 路由 #

## 路由基本使用 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>路由基本使用</title>
    		<script src="../../../thirdlib/vue/vue.js"></script>
    		<script src="../../../thirdlib/vue/vue-router.min.js"></script>
    		<style>
    			.myactive{
    				color:red;
    				font-weight: 800;
    				font-style: italic;
    				font-size: 40px;
    				text-decoration: underline;
    				background-color: green;
    			}
    			.v-enter,
    			.v-leave-to{
    				opacity: 0;
    				transform: translateX(80px);
    			}
    			.v-enter-active,
    			.v-leave-active{
    				transition: all 0.5s ease;
    			}
    			
    		</style>
    	</head>
    	<body>
    		<div id="app">
    			
    			
    			<router-link to="/login" tag="span">登录</router-link>
    			<router-link to="/register">注册</router-link>
    			
    			<transition mode="out-in">
    				<router-view></router-view>
    			</transition>
    		</div>
    		
    		<script>
    			var login = {
    				template:"<h1>登录组件</h1>"
    			}
    			var register = {
    				template:"<h1>注册组件</h1>"
    			}
    			
    			
    			//创建一个路由对象，当导入vue-router包之后，在window全局对象中有了一个构造函数，叫做VueRouter
    			//在new路由对象的时候，可以为构造函数传递一个配置对象
    			var routerobj = new VueRouter({
    				routes:[//表示路由匹配规则
    					//每个路由规则都是一个对象，这个规则对象都有两个必须的属性
    					//属性1是path，表示监听哪个路由链接地址
    					//属性2是component，表示如果 路由是前面匹配到的path，表示展示component属性对应的组件
    					//注意：component属性值必须是一个组件模板对象，不能是组件的引用名称
    					//{path : '/', component : login},
    					{path : '/', redirect : '/login'},//重定向
    					{path : '/login', component : login},
    					{path : '/register', component : register}
    					
    				] ,
    				linkActiveClass:'myactive'
    			});
    			
    			
    			var vm = new Vue({
    				el:"#app",
    				data:{
    					
    				},
    				methods:{},
    				router:routerobj//将路由规则对象注册到vm实例上，用来监听url地址
    			})
    		</script>
    	</body>
    </html>

## 路由规则中定义参数 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>路由规则中定义参数</title>
    		<script src="../../../thirdlib/vue/vue.js"></script>
    		<script src="../../../thirdlib/vue/vue-router.min.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			<router-link to="/login?id=10&name=张三" tag="span">登录</router-link>
    			<router-link to="/register/12/李四">注册</router-link>
    			<router-view></router-view>
    		</div>
    		
    		<script>
    			var login = {
    				template:"<h1>登录组件 --- {
       { $route.query.id }}{
       { $route.query.name }}</h1>",
    				created(){//组件生命周期钩子
    					console.log(this.$route.query.name);
    				}
    			}
    			var register = {
    				template:"<h1>注册组件</h1>",
    				created(){
    					console.log(this.$route.params.id);
    					console.log(this.$route.params.name);
    				}
    			}
    			
    			var routerobj = new VueRouter({
    				routes:[
    					{path : '/', redirect : '/login'},//重定向
    					{path : '/login', component : login},
    					{path : '/register/:id/:name', component : register}
    					
    				]
    			});
    			
    			
    			var vm = new Vue({
    				el:"#app",
    				data:{
    					
    				},
    				methods:{},
    				router:routerobj
    			})
    		</script>
    	</body>
    </html>

## 路由嵌套 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>路由嵌套</title>
    		<script src="../../../thirdlib/vue/vue.js"></script>
    		<script src="../../../thirdlib/vue/vue-router.min.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			<router-link to="/account">account</router-link>
    			<router-view></router-view>
    		</div>
    		
    		<template id="tmpl">
    			<div>
    				<h1>这是account组件</h1>
    				<router-link to="/account/login">登录</router-link>
    				<router-link to="/account/register">注册</router-link>
    				<router-view></router-view>
    			</div>
    		</template>
    		<script>
    			var account = {
    				template:"#tmpl"
    			}
    			var login = {
    				template:"<h3>登录</h3>"
    			}
    			var register = {
    				template:"<h3>注册</h3>"
    			}
    			
    			var router = new VueRouter({
    				routes:[
    					{path : '/account', component : account, children:[
    						{path : 'login', component : login},
    						{path : 'register', component : register}
    					]}
    //					{path : '/account/login', component : login},
    //					{path : '/account/register', component : register}
    					
    				]
    			});
    			
    			
    			var vm = new Vue({
    				el:"#app",
    				data:{
    					
    				},
    				methods:{},
    				router:router
    			})
    		</script>
    	</body>
    </html>

## 命名视图实现经典布局 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>命名视图实现经典布局</title>
    		<script src="../../../thirdlib/vue/vue.js"></script>
    		<script src="../../../thirdlib/vue/vue-router.min.js"></script>
    		<style>
    			html, body, h1{
    				margin: 0;
    				padding: 0;
    				font-size: 20px;
    			}
    			.header{
    				height: 80px;
    				background-color: orange;
    			}
    			.container{
    				display: flex;
    				height: 600px;
    			}
    			.left{
    				background-color: lightblue;
    				flex: :2;
    			}
    			.main{
    				background-color: lightcoral;
    				flex: 8;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="app">
    			<router-view></router-view>
    			<div class="container">
    				<router-view name="left"></router-view>
    				<router-view name="main"></router-view>
    			</div>
    		</div>
    		
    		<script>
    			var header = {
    				template:'<h1 class="header">header头部区域</h1>'
    			}
    			var left = {
    				template:"<h1 class='left'>left区域</h1>"
    			}
    			var main = {
    				template:"<h1 class='main'>main主体区</h1>"
    			}
    			
    			var router = new VueRouter({
    				routes:[
    					{path : '/', components : {
    						default:header,
    						left : left,
    						main:main
    					}}
    					/*{path : '/header', component : header}
    					{path : '/left', component : left},
    					{path : '/main', component : main}*/
    				]
    			});
    			
    			
    			var vm = new Vue({
    				el:"#app",
    				data:{
    					
    				},
    				methods:{},
    				router:router
    			})
    		</script>
    	</body>
    </html>

[VUE]: https://blog.csdn.net/A_art_xiang/article/details/106855763
[VUE 1]: https://blog.csdn.net/A_art_xiang/article/details/106859395
[VUE 2]: https://blog.csdn.net/A_art_xiang/article/details/106996196
[VUE 3]: https://blog.csdn.net/A_art_xiang/article/details/106996285
[VUE 4]: https://blog.csdn.net/A_art_xiang/article/details/106996470