Vue.js框架入门之vue-router路由的基本使用

最新推荐文章于 2022-12-07 22:44:24 发布

那是我呐

最新推荐文章于 2022-12-07 22:44:24 发布

阅读量767

点赞数 2

分类专栏： Vue.js 文章标签： vue css html javascript css3

本文链接：https://blog.csdn.net/weixin_42402867/article/details/105928694

版权

Vue.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前面几期整理，详见博客

Vue.js框架入门之vue简介和基本语法(一）

Vue.js框架入门之基本语法(二)

Vue.js框架入门之条件渲染、列表渲染、事件处理

Vue.js框架入门之表单和组件基础

Vue.js框架入门之组件创建、注册、使用

现在来续写第六期——Vue Router路由管理器

一、什么是路由

1、后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；

2、前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；

3、在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；

二、在 vue 中使用 vue-router

案例演示

当点击登录或注册按钮，分别显示登录页或注册页，而不是一起显示。

完整代码（没有单独写js和css）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>路由的基本使用</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	</head>

	<body>
		<!-- 视图区 -->
		<div id="app">


			<!-- router-link 默认渲染为一个a 标签 -->
			<div class="content">
				<div class="ontitle">
					<router-link to="/login" tag="span">登录</router-link>
					<router-link to="/register" tag="span">注册</router-link>
				</div>
			</div>
			<transition mode="out-in">
				<router-view></router-view>
			</transition>

		</div>
		<!-- 脚本区 -->
		<script>
			// 组件的模板对象
			var login = {
				template: `
						<div class="text">
						<h2> 登录页</h2>
							<p>
								用户名：<input placeholder="请输入您的用户名"> 
							</p>
							<p>
								密&ensp;&ensp;码：<input type="password" placeholder="请输入您的密码" /> 
							</p>
							<button type="submit">立即登录</button>
							</div>
							
							`
			}

			var register = {
				template: `
						<div class="text">
						<h2> 注册页</h2>
							<p>
								用户名：<input placeholder="请输入您的用户名"> 
							</p>
							<p>
								密&ensp;&ensp;码：<input type="password" placeholder="请输入您的密码" /> 
							</p>
							<p>
								确认密码：<input type="password"  placeholder="请再次输入您的密码" /> 
							</p>
							<button type="submit" >立即注册</button>
							</div>
							
							`
			}


			//    Vue.component('login', {
			//      template: '<h1>登录组件</h1>'
			//    })

			// Vue.component('register', {
			//   template: '<h1>注册组件</h1>'
			// })

			// 2. 创建一个路由对象， 当 导入 vue-router 包之后，在 window 全局对象中，就有了一个 路由的构造函数，叫做 VueRouter
			// 在 new 路由对象的时候，可以为 构造函数，传递一个配置对象
			var routerObj = new VueRouter({
				// route // 这个配置对象中的 route 表示 【路由匹配规则】 的意思
				routes: [ // 路由匹配规则 
					// 每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性：
					//  属性1 是 path， 表示监听 哪个路由链接地址；
					//  属性2 是 component， 表示，如果 路由是前面匹配到的 path ，则展示 component 属性对应的那个组件
					// 注意： component 的属性值，必须是一个 组件的模板对象， 不能是 组件的引用名称；
					// { path: '/', component: login },
					{
						path: '/',
						redirect: '/login'
					}, // 这里的 redirect 和 Node 中的 redirect 完全是两码事
					{
						path: '/login',
						component: login
					},
					{
						path: '/register',
						component: register
					}
				],
				linkActiveClass: 'myactive'
			})

			var vm = new Vue({
				el: '#app',
				data: {
					// data数据初始化赋值
					username: "",
					password: "",
				},
				methods: {

				},
				router: routerObj // 将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
			});
		</script>

		<!-- 样式区 -->
		<style>
			.myactive {
				color: blue;
				font-weight: 800;
				font-size: 23px;
				transition: all 0.5s ease;
			}

			.content {
				font-size: 20px;
				font-weight: 500;
				padding: 10px;

			}

			.ontitle span {
				padding: 10px 20px;
				margin: 20px;
				border-style: solid;
				border-width: 1px;
			}

			.v-enter,
			.v-leave-to {
				opacity: 0;
				transform: translateX(140px);
			}

			.v-enter-active,
			.v-leave-active {
				transition: all 0.5s ease;
			}
		</style>
	</body>

</html>

1、安装

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

当然也可以先下载下来，在本地引入

2、编写组件

//编写登录组件
var login = {
	template: `
        <div class="text">
			<h2> 登录页</h2>
			<p>
				用户名：<input placeholder="请输入您的用户名"> 
			</p>
			<p>
				密&ensp;&ensp;码：<input type="password" placeholder="请输入您的密码" /> 
			</p>
			<button type="submit">立即登录</button>
		</div>	
				`
}

//注册组件
var register = {
	template: `
		<div class="text">
			<h2> 注册页</h2>
			<p>
				用户名：<input placeholder="请输入您的用户名"> 
			</p>
			<p>
				密&ensp;&ensp;码：<input type="password" placeholder="请输入您的密码" /> 
			</p>
			<p>
				确认密码：<input type="password"  placeholder="请再次输入您的密码" /> 
			</p>
			<button type="submit" >立即注册</button>
		</div>				
				`
}

3、创建路由对象并指定路由规则

当导入 vue-router 包之后，在 window 全局对象中，就有了一个路由的构造函数，叫做 VueRouter，在 new 路由对象的时候，可以为构造函数，传递一个配置对象。

路由匹配规则

每个路由规则，都是一个对象，这个规则对象，身上有两个必须的属性：

属性1 是 path，表示监听哪个路由链接地址；
属性2 是 component，表示，如果路由是前面匹配到的 path ，则展示 component 属性对应的那个组件；
注意： component 的属性值，必须是一个组件的模板对象，不能是组件的引用名称；

var routerObj = new VueRouter({
	routes: [{ //配置初次打开页面路由的重定向
			path: '/',
			redirect: '/login'
		}, // 这里的 redirect 和 Node 中的 redirect 完全是两码事
		{
			path: '/login',
			component: login
		},
		{
			path: '/register',
			component: register
		}
	],
})

注意，路由对象一定在放在实例的下方！！

4、使用 router 属性来使用路由规则

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
	el: '#app',
	data: {},
	methods: {},
	router: routerObj ,// 使用 router 属性来使用路由规则
	components:{}
});

5、使用 router-link 组件来导航

<router-link to="/login" tag="span">登录</router-link>
<router-link to="/register" tag="span">注册</router-link>

当然为了进一步看清router-link的渲染过程，我们可以利用审查元素来观察

可以看到，路由规则激活后，vue-router自动为我们的span标签生成了class属性，为router-link-exact-active和router-link-active

（1）router-link-exact-active

是精确匹配规则，即只有当前点击router被匹配，当路由到哪里时，该类名就添加到对应的路由标签上

（2）router-link-active

默认是全包含匹配规则，即path名全包含在当前router path名开头的router也会被匹配到。

路由中，子路由的path设置（比如：http://localhost:8080/login）包含了父路由的path设置（比如：http://localhost:8080/）,那么点击子路由的时候，给子路由添加router-link-active类时，父路由也有router-link-active类。

router-link 默认渲染为一个a 标签
可以使用tag属性指定router-link渲染的标签类型
当 <router-link> 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active
设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

var routerObj = new VueRouter({
	routes: [{ //配置初次打开页面路由的重定向
			path: '/',
			redirect: '/login'
		}, // 这里的 redirect 和 Node 中的 redirect 完全是两码事
		{
			path: '/login',
			component: login
		},
		{
			path: '/register',
			component: register
		}
	],
	linkActiveClass: 'myactive'  //设置路由高亮
})

编写myactive的css样式

.myactive {
		color: blue;
		font-weight: 800;
		font-size: 23px;
		transition: all 0.5s ease;
	}

6、使用 router-view 组件来显示匹配到的组件

<!-- 在视图层使用 router-view 组件来显示匹配到的组件 -->

<router-view></router-view>

7、设置路由切换动效

运用vue的动画效果实现，在router-view 组件前加上transition组件

<transition mode="out-in">
    <router-view></router-view>
</transition>

设置css样式

.v-enter,
.v-leave-to {
                opacity: 0;
                transform: translateX(140px);
            }

.v-enter-active,
.v-leave-active {
                    transition: all 0.5s ease;
                }

动画效果如下

8、稍加布局和样式美化

<div class="content">
    <div class="ontitle">
        <router-link to="/login" tag="span">登录</router-link>
        <router-link to="/register" tag="span">注册</router-link>
    </div>
</div>

.content {
	font-size: 20px;
	font-weight: 500;
	padding: 10px;

}

.ontitle span {
	padding: 10px 20px;
	margin: 20px;
	border-style: solid;
	border-width: 1px;
}