20、Vue-嵌套router

20、Vue-嵌套router


<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:`
我是首页内容
歌曲 电影
`
}; // 嵌套页组件 var Song={ template:`
歌曲列表页
`
}; var Movie={ template:`
电影列表页
`
}; // 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: `
首页
`
, } new Vue({ el: '#app', data() { return { } }, components: { App }, // 6、交给Vue实例化对象管理 router: router, template: ` `, });
script> html>

你可能感兴趣的:(Vue学习基础)