六、vue学习之嵌套路由

最新推荐文章于 2025-11-09 18:01:48 发布

原创最新推荐文章于 2025-11-09 18:01:48 发布 · 266 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何在Vue.js中实现嵌套路由，通过具体的代码示例展示了如何定义嵌套的路由组件，如首页、注册页和登录页，并使用VueRouter进行页面跳转和视图渲染。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue嵌套路由</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app"></div>
	</body>
	<script>	
		const Home = {
			template:'<div><router-link :to="{name:\'register\'}">注册</router-link><router-link :to="{name:\'login\'}">登录</router-link><router-view></router-view></div>'
		};
		const Register = {
			template:'<div>我是注册页面</div>'
		};
		const Login = {
			template:'<div>我是登录页面</div>'
		};
		const routes = [
			{
				name:'home',
				path:'/home',
				component:Home,
				children:[
					{
						name:'register',
						path:'register',
						component:Register
					},
					{
						name:'login',
						path:'login',
						component:Login
					}
				]
			}
		];
		const router = new VueRouter({
			routes
		});
		Vue.component('Home',{
			data(){
				return {
					
				};
			},
			template:'<div><router-link :to="{name:\'home\'}">首页</router-link><router-view></router-view></div>'
		});
		new Vue({
			el:'#app',
			data(){
				return {
					
				};
			},
			template:'<Home/>',
			router //使路由生效
		});
	</script>
</html>