# 前端基础知识（1）

# 路由组件和非路由组件的区别

路由组件一般放置在 pages|views 文件夹；
非路由组件一般放置在 components 文件夹。
路由组件一般需要在 router 文件夹中进行注册（使用的即为组建的名字）；
非路由组件在使用的是由，一般都是以标签的形式使用。
注册完路由，不管是路由身上还是非路由身上搜友 $router,$ route 属性
- $route：一般获取路由信息【路径、query、params 等】
- $router：一般进行编程式导航进行路由的跳转【push|replace】

# 显示或隐藏

v-if||v-show

v-if：多个元素通过条件判断展示或者隐藏某个元素，或者多个元素；
进行两视图的切换。
v-show 进行隐藏：v-show=" $route.path=='/home'||$ route.path=='/search'"

根据组件身上的 $route 获取当前路由的信息，通过路由路径判断显示与隐藏

配置路由的时候，可以给路由添加路由元信息【meta】，路由需要配置对象，它的 key 不能瞎写、胡写、乱写

# 路由跳转有几种方式

声明式导航：router-link (务必要有 to 属性)，可以实现路由的跳转。
- 直接渲染到页面，比如 a 链接
编程式导航：利用的是组件实例的 $router.push|replace 方法，可以实现路由的跳转。（可以书写自己的业务逻辑）
- 再用 js 处理逻辑后需要的页面跳转，例如点击 button 按钮进行跳转
- 如果使用路由跳转的话，必须使用 query 方式传参
- 如果使用 name 跳转，query 和 params 参数都可以进行传参
- this. $router其实就是router，vue为了方便我们在组件中使用router，才添加了this.$ router
```
this.$router.push()  //会进行页面跳转，同时会在历史记录上留下记录
this.$router.replce()  //和push功能相同，但是会替换当前页出现在历史记录中  
this.$router.go(num)  //表示距离当前页的在历史记录上的页数

this.$router.back()  返回到上一页
this.$router.forward()   前进到下一页
```

# 六种组件通信方式

props：适用的场景：父子组件通信
注意事项：
如果父组件给子组件传递数据（函数）：本质其实是子组件给父组件传递数据
如果父组件给子组件传递数据（非函数）：本质就是父组件给子组件传递数据
书写方式：三种
['todos'],{type:Array},
小提示：路由的 props
书写形式：布尔值，对象，函数
自定义事件
适用的场景：子组件给父组件传递数据
$on,$ emit
全局事件总线 $bus
适用的场景：万能
pubsub-js，在 React 框架中使用的比较多（发布与订阅）
使用的场景：万能
Vuex
适用的场景：万能
state：仓库储存数据的地方
mutations：修改 state 唯一的手段
actions：处理 actions，同时可以书写自己的业务逻辑，也可以处理异步
getters：计算属性
export default {} 向外暴露
插槽
适用的场景：父子组件通信 ----（一般结构）
默认插槽
具名插槽
作用域插槽

前端基础知识