量化Mike

量化Mike

关注
发信
关注(28)粉丝(399)

【Vue框架】Vue2中Vue.js路由—路由介绍、路由控制组件切换、路由重定向、路由传参、嵌套路由、路由布局（附源码详解）

1.1 什么是路由？

Vue Router官方文档：https://router.vuejs.org/zh/installation.html
【Vue框架】Vue2中Vue.js路由—路由介绍、路由控制组件切换、路由重定向、路由传参、嵌套路由、路由布局（附源码详解）-LMLPHP

  • 使用路由文件：
    • 1.引用vue-router路由js文件
    • 2.创建router对象
    • 3.在vm对象中注册router对象
    • 4.在视图中使用 router-view 标签
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
		<!-- 
			一、使用路由文件:
				1.引用vue-router路由js文件
				2.创建router对象 
				3.在vm对象中注册router对象
				4.在视图中使用 router-view 标签
		 -->
		 <router-view></router-view>
    </div>

    <script src="../js/vue.js"></script>
	<script src="../js/vue-router.js"></script>
	
    <script>
		var login = {
			template:'<h1>登录组件</h1>'
		}
		
		var register = {
			template:'<h1>注册组件</h1>'
		}
		
		// 创建 router对象
		var router = new VueRouter({
			routes:[
				{path:'/login', component:login},
				{path:'/abc', component:register},
			]
		});
		
        var vm = new Vue({
            el: '#app',
            data: {

            },
            methods: {

            },
			components:{
				
			},
			router
        })
    </script>
</body>
</html>

1.2 路由控制组件切换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<style>
		.router-link-active{color: red;}
	</style>
</head>

<body>
    <div id="app">
		<!-- 写法一 -->
		<!-- <a href="#/login">登录</a> -->
		<!-- <a href="#/abc">注册</a> -->
		
		<!-- 写法二 
			router-link默认渲染成a标签
			如果需要改成其他标签,使用属性tag
			点击那个标签会添加样式类router-link-active,可以修改并增加样式
		-->
		<router-link to="/login" tag="tag">登录</router-link>
		<router-link to="/abc">注册</router-link>
		
		<router-view></router-view>
    </div>

    <script src="../js/vue.js"></script>
	<script src="../js/vue-router.js"></script>
	
    <script>
		// 1.定义组件
		var login = {
			template:'<h1>登录组件</h1>'
		}
		
		var register = {
			template:'<h1>注册组件</h1>'
		}
		
		// 2.创建 router对象
		var router = new VueRouter({
			routes:[
				{path:'/login', component:login},
				{path:'/abc', component:register},
			]
		});
		
        var vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            },
			components:{
			},
			router
        })
    </script>
</body>
</html>

1.3 路由重定向以及动画路由

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<style>
		.router-link-active{color: red;}
		.v-enter,
		.v-leave-to{
			opacity: 0;
			transform: translateX(200px);
		}
		
		.v-enter-active,
		.v-leave-active{
			transition: all 1s ease;
		}
	</style>
</head>

<body>
    <div id="app">
		<!-- 写法一 -->
		<!-- <a href="#/login">登录</a> -->
		<!-- <a href="#/abc">注册</a> -->
		
		<!-- 写法二 
			router-link默认渲染成a标签
			如果需要改成其他标签,使用属性tag
			点击那个标签会添加样式类router-link-active,可以修改并增加样式
		-->
		<router-link to="/login" tag="tag">登录</router-link>
		<router-link to="/abc">注册</router-link>
		
		<transition mode="out-in">
			<router-view></router-view>
		</transition>
    </div>

    <script src="../js/vue.js"></script>
	<script src="../js/vue-router.js"></script>
	
    <script>
		// 1.定义组件
		var login = {
			template:'<h1>登录组件</h1>'
		}
		
		var register = {
			template:'<h1>注册组件</h1>'
		}
		
		// 2.创建 router对象
		var router = new VueRouter({
			routes:[
				{path:'/', redirect:'/login'},
				{path:'/login', component:login},
				{path:'/abc', component:register},
			]
		});
		
        var vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            },
			components:{
			},
			router
        })
    </script>
</body>
</html>

1.4 路由传参

  • 第一种传参形式——路由路径进行传参，如：/login?id=20
  • 第二种传参形式——路由占位符进行传参，如：/abc/100
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<style>
		.router-link-active{color: red;}
		.v-enter,
		.v-leave-to{
			opacity: 0;
			transform: translateX(200px);
		}
		
		.v-enter-active,
		.v-leave-active{
			transition: all 1s ease;
		}
		
	</style>
</head>

<body>
    <div id="app">
		<!-- 写法一 -->
		<!-- <a href="#/login">登录</a> -->
		<!-- <a href="#/abc">注册</a> -->
		
		<!-- 写法二 
			router-link默认渲染成a标签
			如果需要改成其他标签,使用属性tag
			点击那个标签会添加样式类router-link-active,可以修改并增加样式
		-->
		<router-link to="/login?id=20" tag="tag">登录</router-link>
		<router-link to="/abc/100">注册</router-link>
		
		<transition mode="out-in">
			<router-view></router-view>
		</transition>

    </div>

    <script src="../js/vue.js"></script>
	<script src="../js/vue-router.js"></script>
	
    <script>
		// 1.定义组件
		var login = {
			template:'<h1>登录组件=={{id}}</h1>',
			data(){
				return{
					id:''
				}
			},
			created(){
				console.log(this.$route.query.id);
				this.id = this.$route.query.id;
			}
		}
		
		var register = {
			template:'<h1>注册组件=={{id}}</h1>',
			data(){
				return{
					id:''
				}
			},
			created(){
				console.log(this.$route.params.id);
				this.id = this.$route.params.id;
			}
		}
		
		// 2.创建 router对象
		var router = new VueRouter({
			routes:[
				{path:'/', redirect:'/login'},
				{path:'/login', component:login},
				{path:'/abc/:id', component:register},
			]
		});
		
        var vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            },
			components:{
			},
			router
        })
    </script>
</body>
</html>

1.5 嵌套路由

嵌套路由的应用场景：每个网站中的首部与网站的底部一般不会改变，变化的内容一般在中间部分。
【Vue框架】Vue2中Vue.js路由—路由介绍、路由控制组件切换、路由重定向、路由传参、嵌套路由、路由布局（附源码详解）-LMLPHP

1.5.1 非嵌套路由案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
		<router-link to="/user">用户</router-link>
		<router-view></router-view>
    </div>
	
	<!-- 用户组件视图 -->
	<template id="temp">
		<div>
			<h1>User组件</h1>
			<router-link to="/login">登录</router-link>
			<router-link to="/register">注册</router-link>
		</div>
	</template>

    <script src="../js/vue.js"></script>
	<script src="../js/vue-router.js"></script>
	
    <script>
		// 1.定义用户组件、登录组件、注册组件
		var user = {
			template:'#temp'
		}
		
		var login = {
			template:'<h1>登录组件</h1>'
		}
		
		var register = {
			template:'<h1>注册组件</h1>'
		}
		
		// 2.创建 router对象
		var router = new VueRouter({
			routes:[
				{path:'/user',component:user},
				{path:'/login',component:login},
				{path:'/register',component:register},
			]
		});
		
        var vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            },
			components:{
			},
			router
        })
    </script>
</body>
</html>

1.5.2 嵌套路由案例

【Vue框架】Vue2中Vue.js路由—路由介绍、路由控制组件切换、路由重定向、路由传参、嵌套路由、路由布局（附源码详解）-LMLPHP

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
		<router-link to="/user">用户</router-link>
		<router-view></router-view>
    </div>
	
	<!-- 用户组件视图 -->
	<template id="temp">
		<div>
			<h1>User组件</h1>
			<router-link to="/user/login">登录</router-link>
			<router-link to="/user/register">注册</router-link>
			<div></div>
			<div>
				<router-view></router-view>
			</div>
		</div>
	</template>

    <script src="../js/vue.js"></script>
	<script src="../js/vue-router.js"></script>
	
    <script>
		// 1.定义用户组件、登录组件、注册组件
		var user = {
			template:'#temp'
		}
		
		var login = {
			template:'<h1>登录组件</h1>'
		}
		
		var register = {
			template:'<h1>注册组件</h1>'
		}
		
		// 2.创建 router对象
		var router = new VueRouter({
			routes:[
				{
					path:'/user',
					component:user, 
					// 注意子路由children下的路由写法
					children:[
						{path:'login',component:login},
						{path:'register',component:register}
					],
				},

			]
		});
		
        var vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            },
			components:{
			},
			router
        })
    </script>
</body>
</html>

1.6 路由布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
	<!-- 
		在一个页面显示多个组件
		default:header 对应的 router-view 可以不写name属性
	 -->
    <div id="app">
		<router-view></router-view>
		<router-view name="content"></router-view>
		<router-view name="footer"></router-view>
    </div>
	

    <script src="../js/vue.js"></script>
	<script src="../js/vue-router.js"></script>
	
    <script>
		// 1.定义
		var header = {
			template:'<h1>头部内容</h1>'
		}
		
		var content = {
			template:'<h1>内容内容</h1>'
		}
		
		var footer = {
			template:'<h1>脚部内容</h1>'
		}
		
		
		// 2.创建 router对象
		var router = new VueRouter({
			routes:[
				{path:'/', components:{
					default:header,
					'content':content,
					'footer':footer
				}},
			]
		});
		
        var vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            },
			components:{
			},
			router
        })
    </script>
</body>
</html>
04-05 05:21
Powered by LMLPHP ©2024 量化Mike 0.008806