vue 组件与路由的简单应用

最新推荐文章于 2024-11-08 21:46:59 发布

原创最新推荐文章于 2024-11-08 21:46:59 发布 · 179 阅读

0 ·

CC 4.0 BY-SA版权

vue.js 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍如何使用Vue.js 2.6.10和Vue Router实现页面路由切换，包括登录和注册组件的嵌套路由配置，以及自定义路由链接样式。

导入
1、vue.js 2.6.10
2、bootstrap3.7.css
3、vue-router.js
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>router</title>
		<link rel = "stylesheet"  href="css/bootstrap3.7/bootstrap.min.css"/>
		<!-- 导入vue.js 2.6.10-->
		<script src="js/vue.js"></script>
		<!-- 引入路由js -->
		<script src="js/vue-router.js"></script>		
		<style>
			/* 1.根据这个定义样式 */
			.router-link-active{color: red;font-weight: 800;font-size: 2rem;}
		</style>
	</head>
	<body>
		<div id="app" class="col-lg-10">
			<!-- <a href="#/login">登陸</a>
			<a href="#/register">注冊</a> -->
			<!-- 默认会被渲染成一个 `<a>` 标签 -->
			<router-link to="/login"> login</router-link>
			<router-link to="/register"> register</router-link>			
			<!-- 路由出口 -->
			<!-- 路由匹配到的组件将渲染在这里 -->
			<router-view></router-view>			
		</div>
		<template id="loginsdemo">
			<div>	<!-- 嵌套路由 -->			
				<h1>这是登陆组件</h1>
				<router-link to="/login/logindemo">登陆组件</router-link>
				<router-view></router-view>
			</div>
			
		</template>
		
		<template id="registersdemo">
			<div>	<!-- 嵌套路由 -->
				<h1>这是注册组件</h1>
				<router-link to="/register/registerdemo">注册组件</router-link>
				<router-view></router-view>
			</div>			
		</template>
		
		<script>
			var login = {template:'#loginsdemo'}
			var register = {template:'#registersdemo'}			
			var logindemo = {template:'<p>logindemos</p>'}
			var registerdemo = {template:'<p>lregister demos</p>'}			
			//创建一个路由对象  当导入vue-router包之后,在window全局对象中,就有一个路由的构造函数叫做VueRouter
			var routerObj = new VueRouter({
				//route 这个配置对象中的routes表示[路由匹配规则]的意思
				routes: [  
					//路由匹配规则有两个必须的属性
					//属性1 是path 表示监听,哪个路由链接地址
					//属性2 是component,表示如果路由是前面匹配到的path,则展示component属性对应;
					//注意:component 的属性值,必须是一个组件的模板对象,不能是组件的引用名称
					//{path:'/',redirect:'/login' },//  打开默认，强制重定向 
					{
						path:'/login',
						component:login,
						children:[
							{path:'/login/logindemo',component:logindemo}
						]						
					},
					{
						path:'/register',
						component:register,
						children:[ //children 配置就是像 routes 配置一样的路由配置数组
							{path:'/register/registerdemo',component:registerdemo}
						] 
					}		
				],
				/* 2.也可以 自己配置class */
				linkActiveClass:'btn btn-success' 
			});
			
			//创建vue实例得到vienmodel
			 var vm = new Vue({
				el:"#app",
				router:routerObj //将路由规则对象,注册到vm 实例上,用来监听url地址的变化,然后展示对应组件
				
			}); 			
		</script>
	</body>
</html>