嵌套路由

注意

children 中的path 不用加  "/"

这是个坑 要注意

嵌套路由主要是配置children 中的路由信息

	children:[
						{
							path:'song',
							component:Song
						},
						{
							path:'movie',
							component:Movie
						},

					]

　　在父组件中进行跳转，使用全局组件

router-link
router-view
	var Home = {
			template:`
			  <div>
				首页内容
				<br />

				<router-link to = '/home/song'>歌曲</router-link>
				<router-link to = '/home/movie'>电影</router-link>

				<router-view></router-view>

			  </div>
			`
		};

　　代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<div id="app"></div>
	<!-- 1.先引入vue.js -->
	<script type="text/javascript" src="./vue.min.js"></script>
	<!-- 2.引包 引入 核心的插件vue-router -->
	<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
	<script type="text/javascript">

		// 地址栏 路由范式

		// （1）xxxxx.html#/user/1    params 动态路由参数
		// (2) ooooo.html#/user?userId = 1  query


		// Vue.use(VueRouter);


		//声明组件
		var Song  = {
			template:`<div>我是歌曲组件</div>`,
			created(){
				console.log(this.$router);
				console.log(this.$route);
			}
		};
		var Movie  = {
			template:`<div>电影组件</div>`,
			created(){
				console.log(this.$route);
			}
		};
		// 3.创建路由对象

		// /home/song
		//  /home/movie
		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 router = new VueRouter({
			// 4.配置路由对象
			routes:[
				// 路由匹配的规则
				{
					//动态路由参数 以冒号开头
					path:'/home',
					name:'home',
					component:Home,
					children:[
						{
							path:'song',
							component:Song
						},
						{
							path:'movie',
							component:Movie
						},

					]
				}
				
			]
		});

		// 抛出两个全局的组件 router-link  router-view

		// 抛出了两个对象  $router  $route (路由信息对象)挂载到了Vue实例化对象
		
		

		var App = {
			template:`
				<div>
					<!--router-link默认会被渲染成a标签，to默认会被渲染成href属性-->
					<router-link :to = "{name:'home'}">首页</router-link>
					
					
					<!--路由组件的出口-->
					<router-view></router-view>
				</div>
			`
		}

		// Cannot read property 'matched' of undefined
		// 5.将配置好的路由对象关联到vue实例化对象中
		new Vue({
			el:'#app',
			router:router,
			template:`<App />`,
			components:{
				App
			}
		});
	</script>
	
</body>
</html>

　　效果：

 

posted @ 2018-08-26 23:37  1点  阅读(170)  评论(0)    收藏  举报