Day084--slot插槽，Vue Router

slot插槽

<div id="app">
    <alert-box>
        <template slot="title">出错！</template>
    </alert-box>
    <hr>
    <alert-box>
        <template slot="text">编译错误！</template>
    </alert-box>
    <alert-box></alert-box>
</div>

    let Alert = {
        template: `<div class="alert-box">
            <strong><slot name="title">Error!</slot></strong>
            <slot name="text">总之就是出错啦！</slot>
        </div>`,
    };

    new Vue({
        el: '#app',
        components: {
            'alert-box': Alert
        }
    })

Vue Router

前端的路由

Vue Router中文文档

路由基本使用

命名路由

this.$router对应的是当前app的路由对象

this.$route对应的是当前的路由信息

路由切换的监听需要用到watch 侦听器

 // 怎么查看每一次路由切换之后的当前路由信息呢？
        watch: {
            '$route': function (to, from) {
                console.log(to);  // 要切换到的路由信息
                console.log(from);  // 切换前的路由信息
                // ajax 请求数据
                // this.data.courseList
            }
        }

路由的动态匹配

URL有参数

/user/1

/user/2

/user?id=1

记住两个参数

1. this.$route.params获取URL中的参数
   1. this.$route.query获取URL中的查询参数

嵌套的路由

类似于Django的二级路由

/user/1/posts

/user/1/info

组件的嵌套

let User = {
        template: `
            <div>
            <h1>这是 {{ this.$route.params.id }}的个人中心页面！</h1>
            <p>当前路由的query信息 {{ this.$route.query.key}}</p>
            <hr>
            <router-view></router-view>
</div>
        `,
    };

二级路由设置

let router = new VueRouter({
        // mode: 'history',
        routes: [
            {
                path: '/user/:id',
                name: 'user',
                component: User,
                children: [
                    {path: '', component: UserInfo},
                    {path: 'info', component: UserInfo},
                    {path: 'posts', component: UserPosts},
                ]
            },
        ]
    });

编程式导航

用代码控制页面的跳转

// 定义课程页面组件
    let Course = {
        template: `<div>
            <h1>这是免费课程页面！</h1>
            <button v-on:click="toHome">返回主页</button>
        </div>`,
        methods: {
            toHome(){
                // 编程式导航 （用代码控制页面跳转）
                this.$router.push({name: 'home'})
            }
        }
    };