VUE 中 vue-router 的使用

最新推荐文章于 2024-02-08 00:26:26 发布

古雅学长

最新推荐文章于 2024-02-08 00:26:26 发布

阅读量120

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_46179813/article/details/108576982

版权

VUE 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
		<script src="js/vue-rotuer-v3.4.3.js"></script>
		
		<style>
			/* .router-link-active */
			.myactive{
				color:red;
				font-weight:800;
				font-style:italic;
				font-size: 80px;
				text-decoration: dashed;
			}
			
			.venter,
			.v-leave-to{
				opacity:0;
				transform:translateX(140px);
			}
			
			.v-enter-active,
			.v-leave-active{
				transition:all 0.5s ease;
			}
			
		</style>
	</head>
	<body>

<div id="app">
			<!-- 这是 vue-router 提供的元素，专门用来 当作占位符的，将来，路由规则，匹配到的组件，
			 就会展示到这个hi router-view 中去-->
			 <!-- 所以：我们可以把 router-view 认为是一个占位符 -->
			
			<!-- 这里是哈希路径 -->
				<!-- <a href="#/login">登录</a>
				<a href="#/regedit">注册</a> -->
				
				<!-- router-link 默认渲染为一个 a 标签 tag="span" 设置标签类型-->
				<router-link to="/login" tag="span">我要登录</router-link>
				<router-link to="/regedit">我要注册</router-link>
			<transition mode="out-in">
				<router-view></router-view>
			</transition>
			
		</div>
	</body>

	<script>
			//组件的模板对象
			var login = {
				template:'<h1>登录组件</h1>'
			}
			
			var regedit = {
				template:'<h1>注册组件</h1>'
			}
			
			//创建一个路由对象，当 导入 vue-router 包之后，在 window 全局对象中，就有了一个 路由的结构函数，叫做 VueRouter
			//在 new 路由对象的时候，可以为 构造函数，传递一个配置对象
			var routerObj = new VueRouter({
				//route 这个配置对象中的 route 表示 【路由匹配规则】的意思
				routes:[//路由匹配规则
				//每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性
				//属性1 是 path，表示监听 那个路由链接地址
				//属性2 是 component ，表示如果 路由是前面匹配到的 path ，则表示 component 属性对应的那个组件
				//注意：component 的属性值，必须是一个 组件的模板对象，不能是 组件的引用名称；
				{ path:'/',redirect:'/login' },//重定向
				//这里的 redirect 和 Node 中的 redirect 完全是两码事
				
				{ path: '/login',component:login},
				{ path: '/regedit',component:regedit}
				],
				
				// 修改默认的类 属性
				linkActiveClass:'myactive'
			})
		var vm = new Vue({
			el:'#app',
			data:{
				
			},
			methods:{
				
			},
			router:routerObj//将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
		})
	</script>
</html>

古雅学长

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE 中 vue-router 的使用

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/vue.js"></script> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"&gt
复制链接

扫一扫