vue全家桶笔记-慕课网

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u013299635/article/details/81989364

npm install -g npm // npm版本更新

vue init webpack demoName // 创建vue 脚手架

dependencice和devDependencices的区别

  dependencice:上线后的依赖

  DevDenpendencice:开发环境的依赖

页面参数传递方法：

1.query

 传递 ：this.$router.push({name:'index', query:{num:1}})  

 获取： this.$route.query.num  //字符串

2.params

 传递： this.$router.push({name:'index', params:{num:1}})  

获取：this.$route.params.num //数字

在<router-link @click="">上添加点击事件总是无效

这是因为<router-link>在HTML5历史记录模式下，router-link将拦截点击事件，以便浏览器不会尝试重新加载页面。
但如果想要添加点击事件怎么办呢？  Vue 给出了一种解决办法，在事件上加上修饰符  “.native”，

示例如下：<router-link @click.native="">

打开默认显示子组件设置（直接写子路由名字即可）

{
  path: '/',
  name: '/',
  component: First
},
{
  path: '/officalNet',
  name: 'OfficalNet',
  component: OfficalNet,
  children: [
    {
      path: 'Offical-introduce',
      // redirect: "OfficalIntroduce", // 重定向,指向了home组件
      name: 'OfficalIntroduce',
      component: OfficalIntroduce
    }
  ]
}

this,$router.push({name: 'OfficalIntroduce');// 直接写子路由名字即可

父组件调用子组件方法

/* 
modalBox: 父组件引用子组件，写在template里面的 ref='modalBox'
initDom: 子组件定义的方法
*/
this.$refs.modalBox.initDom(参数)