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(参数)