Vue 组件通信与路由

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情 >>

组件通信

1.组件通信

• (1) props $emit解决父子组件层数较少的情况
• (2) $attrs$listeners 解决组件嵌套多层关系
• (3)中央事件总线$bus new Vue( )
• $on()$emit 挂载的同-个实例化对象解决兄弟组件传值
• 5(4) vuex的流程图脑子要有这个概念
  2.声明周期的图示
  3.路由的使用
  
• 3.1引入包(两个全局的组件router-link to属性
• router-view (匹配路由组件的出口) )
• 3.2创建实例化VueRouter对象
• 3.3匹配路由规则
• 3.4挂载new Vue( )实例化对象中
• 给vue实例化对象挂载了两个对象this . $router (它就是VueRouter) thi .$route (
• 配置路由信息的对象)

路由解析

命名路由
绑定自定义的属性:to =" {name: '路由的名字'}”
路由的参数
path: ' /user/:id
:to= "{name: 'user' , params:{id:1}}"
path: ' /user'
:to= " {name:'user' , query:{userId:1}}"
嵌套路由(应用子的路由是不同的页面结构)
/home/music ===> /home/ movie
一个router-view中嵌套 另外一个route-view

代码实现

	<!-- 路由的实现
	（1）传统的开发方式url改变后，立刻发生请求相应这个页面，有可能资源过多，传统开发会让页面出现白屏
	（2）SPA 单页面应用 Single Page Application
	锚点值改变后
	不会立刻发送请求，而是在某个合适的时机，发送请求ajax 页面局部渲染
	优点：页面不立刻跳转 用户体验好
	 
	 -->
	
	<a href="#/login">登录页面</a>
	<a href="#/register">注册页面</a>
	<div id="app">
		
	</div>
	<script type="text/javascript">
		var oDiv=document.getElementById('app');
		
		window.onhashchange=function(){
			console.log(location.hash);
			switch(location.hash){
				case '#/login':
				oDiv.innerHTML='<h2>我是登录页面</h2>'
				break;
				case '#/register':
				oDiv.innerHTML='<h2>我是注册页面</h2>'
				break;
				default:
				break;
			}
		}
	</script>
</body>`