20 vue-嵌套router

行走的皮卡丘

已于 2022-05-30 10:05:11 修改

阅读量338

点赞数 23

分类专栏： Vue学习基础文章标签： vue javascript js

于 2020-08-07 10:17:32 首次发布

本文链接：https://blog.csdn.net/weixin_44908159/article/details/107831944

版权

Vue学习基础专栏收录该内容

27 篇文章 11 订阅

订阅专栏

在这里插入图片描述

20 Vue-嵌套router

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>行找的皮卡丘</title>
	</head>
	<body>
		<div id="app">

		</div>
	</body>
	<script type="text/javascript" src="js/vue.min.js">
		// 下载vue-router  项目目录下：npm install vue-router 
		// 1、vue-router依赖于Vue  所以要引入Vue模块
	</script>
	<script type="text/javascript" src=".\node_modules\vue-router\dist\vue-router.js">
		// 2、引入vue-router
	</script>

	<script type="text/javascript">
		// 3、让Vue 使用VueRouter创建
		// Vue.use(VueRouter);
		
		// 首页组件
		var Home={
			template:`<div>
				我是首页内容
				<br/>
				<router-link to='/home/song'>歌曲</router-link>
				<router-link to='/home/movie'>电影</router-link>
				<router-view></router-view>
			</div>`
		};
		
		// 嵌套页组件
		var Song={
			template:`<div>歌曲列表页</div>`
		};
		var Movie={
			template:`<div>电影列表页</div>`
		};
		
		
		// 4、创建router对象
		var router = new VueRouter({
			// 5、配置路由对象
			routes: [
				// 路由匹配的规则
				{
					path: '/home',
					component: Home,
					name: 'home',
					// 嵌套路由中的子级路由
					children:[
						{
							path: 'song',
							component: Song,
						},
						{
							path: 'movie',
							component: Movie,
						},
					]
				},
			]
		});

		// 引入vue-router模块后 会抛出两个全局组件 
		// 1）router-link 相当于a标签，里面的to属性相当于href属性
		// 2）router-view 路由匹配组件出口 (它渲染的组件是你使用 vue-router 指定的)
		var App = {
			template: `
				<div>
					<!--绑定to属性 通过路由名字匹配对应的组件-->
					<router-link :to='{name:"home"}'>首页</router-link>
					<router-view></router-view>
				</div>
				
			`,
		}

		new Vue({
			el: '#app',
			data() {
				return {

				}
			},
			components: {
				App
			},
			// 6、交给Vue实例化对象管理
			router: router,
			template: `
				<App/>
			
			`,

		});
	</script>
</html>