Vue（路由）

最新推荐文章于 2022-07-07 23:26:28 发布

qq_1405449844

最新推荐文章于 2022-07-07 23:26:28 发布

阅读量201

点赞数

分类专栏： Vue 文章标签： Vue(路由)

本文链接：https://blog.csdn.net/qq_45621713/article/details/103146538

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vue路由

1.后端路由对于一个普通的网站所有的超链接都是一个URL地址所有的URL地址都指向服务器上的某个资源

2.前端路由对于单页面应用程序通过URL中的hash(#)来实现不同页面的切换

通过#号改变切换页面的方式我们称为前端路由

在Vue中使用路由

1.安装路由模块

2.使用a标签进行导航目的就是为改变URL 使其能被监听

3.使用router-view 去显示匹配的组件

4.创建组件模板对象

5.创建路由实例通过routes属性去定义路由匹配规则

6.将路由实例挂载到VM实例中

通过查询字符串得到参数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>通过查询字符串得到参数</title>
	<script src="../libs/vue-2.4.0.js"></script>
	<script src="../libs/vue-router-3.0.1.js"></script>
</head>
<body>
	<div id="app">
		<router-link to="/login?id=3&name=zhangsan">登陆</router-link>
		<router-link to="/register">注册</router-link>

		<router-view></router-view>
	</div>

	<script>
		var login = {
			template: "<h1>登陆组件 {{$route.query.id}} --- {{this.$route.query.name}}</h1>",
			data: function() {
				return {
					msg: "111"
				}
			},
			methodsL: {}
		}
		var reg = {
			template: "<h1>注册组件</h1>"
		}

		var router = new VueRouter({
			routes: [
				{path: "/login", component: login},
				{path: "/register", component: reg},
			]
		})

		var vm = new Vue({
			el: "#app",
			router
		})
	</script>
</body>
</html>

实现经典布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>实现经典布局</title>
	<script src="../libs/vue-2.4.0.js"></script>
	<script src="../libs/vue-router-3.0.1.js"></script>
</head>
<body>
	<div id="app">
		<router-view></router-view>
		<router-view name="left"></router-view>
		<router-view name="main"></router-view>
	</div>


	<script>
		var header = {
			template: "<h1>我来组成头部</h1>"
		}
		var left = {
			template: "<h1>我来组成导航栏</h1>"
		}
		var main = {
			template: "<h1>我来组成主体</h1>"
		}

		//创建路由对象
		var router = new VueRouter({
			routes: [
				/*{path:'/', component: header},
				{path:'/left', component: left},
				{path:'/main', component: main}*/
				{path: '/', components: {
					'default':header,
					'left':left,
					'main':main

				}}

			]
		})

		var vm = new Vue({
			el: "#app",
			router
		})
	</script>
</body>
</html>

路由嵌套

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>路由嵌套</title>
	<script src="D:\develop\Web\js/vue-2.4.0.js"></script>
	<script src="D:\develop\Web\js/vue-router-3.0.1.js"></script>

</head>
<body>
	<div id="app">
		<router-link to="/parent">父组件</router-link>
		<router-view></router-view>
	</div>
	
	<template id="parent">
		<div>
			<h1>小燕子 穿花衣 年年春天来这里 我问燕子你为啥来 燕子说 管好你自己</h1>
			
			<router-link to="/parent/login">登陆</router-link>
			<router-link to="/parent/register">注册</router-link>

			<router-view></router-view>
		</div>
	</template>

	<script>
		var parent = {
			template: "#parent"
		}
		var login = {
			template: "<h1>登陆组件</h1>"
		}
		var reg = {
			template: "<h1>注册组件</h1>"
		}

		var router = new VueRouter({
			routes: [
				{
					path: '/parent', 
					component: parent,

				// 使用children属性 实现子路由   同时 子路由不需要携带/  否则会从根路径发送请求  
					children: [
						{path: 'login', component: login},
						{path: 'register', component: reg}
					]

				},
/*				{path: '/login', component: login},
				{path: '/register', component: reg},*/
			]
		})

		var vm  = new Vue({
			el: "#app",
			router
		})
	</script>
</body>
</html>

Watch监听数据变化

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Watch监听数据变化</title>
	<script src="../libs/vue-2.4.0.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" v-model="first">+
		<input type="text" v-model="last" >=
		<input type="text" v-model="full">
	</div>

	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				first:'',
				last:'',
				full:''
			},
			watch: {
				'first' :function(newv, oldv) {
					// console.log(newv + '------' + oldv)
					this.full = newv + this.last
				},
				'last' :function(newv, oldv) {
					// console.log(newv + '------' + oldv)
					this.full = this.first +  newv;
				}
			}
		})
	</script>
</body>
</html>