第三阶段 vue day09

组件之间通信的方式，有哪些 （七大）

- prop     父传递数据给子组件                √

- $emit    子组件触发自定义事件               √

- 兄弟组件： 数据提升，提升到相同的父组件身上      √

- v-model： 父子双向                         √

- .sync 修饰符：父子双向                       √

- $refs    父子                              √

- $parent  子父

- $root    根组件

- $children  所有子组件的集合[]

- provide/inject  层级很深的时候               √

- 事件总线 EventBus                          √

- 终极解决方案：状态管理器（Vuex）               √
 

路由

- 前端路由中 就是路径和组件的对应关系

- 创建一个路由的步骤

    1. 引入Vue核心

    2. 引入vue-router插件

    3. 引入定义好的路由组件views(pages)文件中写的组件

    4. 注册vue-router插件

        `Vue.use(xxx)`

    5. 定义路由规则集合

    6. 实例化 路由实例对象 -- routes配置选项

    7. 暴露出去

        `export default 实例化对象名`

    8. main.js

        - 引入路由实例对象

        - 配置选项 router

使用路由

    1. 放一个坑，用来承载路径匹配的组件

        `<RouterView />`

    2. 声明式导航--声明式跳转/a标签跳转(实现跳转)

        - a标签

        - router-link组件方式———— to 字符串方式 不需要#号

            - 高亮 router-link-active

            ```js

                .router-link-active {

                    color: red;

                }

            ```

    3. 编程式导航(编程式跳转/js跳转)

        - js控制跳转：location.href

        - this.$router.push/replace(替换页面)

    4. name 命名路由 ———— to="{name:'xxx'}"

路由传参 跳转

     声明式导航

        - 路径后面通过？号传递参数

            `<router-link to="/detail?id=2&name=柳"></router-link>`

        - 对象形式，通过query来传递

            ```js

            <router-link:to="{

                name: 'detail',

                query: {

                    id: item.id,

                    name: item.name,

                }}

        ">{{ item.name }}</router-link>

        ```

    编程式导航

        - 字符串方式

            - this.$router.push(`字符串`)

        - 对象 -> params

            - 在路由规则路径上得有占位符 ` path: '/detail/:id/:name',`

            - ```js

                this.$router.push({

                    name: "detail",

                    params: {

                        id,

                        name,

                    },

                });

            ```

 路由信息对象

    - route    = this.$route   路由信息对象 里面存放着当前路由信息的一些数据: name \ fullPath \ query \ params ...

    - router   = this.$router  路由实例对象(路由器对象) 有一些数据和方法: mode \ push() \ replace() ...

动态路由匹配

    - `*` 捕获所有路由或 404 Not found 路由(一般放在最后)

    - `?` 表示这个坑(占位)可有可无

props

props 需要你在组件中通过props选项先定义，不然会被$attrs接收到(路由规则)

    1. 布尔值

        - props: false/true

    2.  对象式  静态传递属性给当前规则的组件

        - ```js

            props: {

                id: "1",

                name: "333",

            },

        ```

    3. 函数式

        ```js

        props: function (route) {

            return {

                id:xxx,

                name:bbb

            }

        }

        ```

- 问题

- 猜你喜欢时，组件会被复用，导致生命周期的钩子函数不会重复执行。带来的问题是：页面数据会有问题

    - 第一种方案：监听 $route

    - 第二种方案：使用 beforeRouteUpdate 钩子函数 导航守卫

- 一级路由需要以 / 开头，其它级别的路由不要写 /

- 路由嵌套 children选项

- 重定向

 - 重定向 的话，就不要 component

 1. 直接在规则下 写 `redirect: 'xxx'`

 2. path: '',

    redirect: '/films/nowPlaying'