测试开发进阶(十九)

嵌套路由

场景:父页面打开,再打开子页面

借鉴官方示例:

https://github.com/vuejs/vue-router/blob/dev/examples/nested-routes/app.js

const router = new VueRouter({
    mode: 'history',
    base: __dirname,
    routes: [
        {path: '/', redirect: '/parent'},
        {
            path: '/parent',
            component: Parent,
            children: [
                // an empty path will be treated as the default, e.g.
                // components rendered at /parent: Root -> Parent -> Default
                {path: '', component: Default},
                // components rendered at /parent/foo: Root -> Parent -> Foo
                {path: 'foo', component: Foo},
                // components rendered at /parent/bar: Root -> Parent -> Bar
                {path: 'bar', component: Bar},
                // NOTE absolute path here!
                // this allows you to leverage the component nesting without being
                // limited to the nested URL.
                // components rendered at /baz: Root -> Parent -> Baz
                {path: '/baz', component: Baz},
                {
                    path: 'qux/:quxId',
                    component: Qux,
                    children: [
                        {path: 'quux', name: 'quux', component: Quux},
                        {path: 'quuy', name: 'quuy', component: Quuy}
                    ]
                },
                {path: 'quy/:quyId', component: Quy},
                {name: 'zap', path: 'zap/:zapId?', component: Zap}
            ]
        }
    ]
})

修改 /src/router/index.js

{
    path: '/login',
    component: Login,
    children: [
        {path: '', component: Login},//默认路由
        {path: '/projects_list2', component: ProjectsList},
        {path: 'projects_list2', component: ProjectsList}
    ]
},

/src/components/Login.vuetemplate中添加以下内容

<p>=====================</p>
<router-view></router-view>

输入:http://localhost:8080/login会显示两个输入内容

这是因为子路由中有一个 的默认路由:{path:'',component:Login},所以父路由加载一次,子路由加载一次

输入: http://localhost:8080/projects_list2会显示登录部分和项目部分

但是它使用的是 {path:'/projects_list2',component:ProjectsList}

输入: http://localhost:8080/login/projects_list2也会显示一样的内容

但它使用的是 {path:'projects_list2',component:ProjectsList}

两者区别是有无 /

axios

  • 非常流行的请求库
  • vue发起异步请求的标配

安装方式:

$ cnpm install axios -S

测试接口:https://dog.ceo/api/breeds/image/random

修改 /src/components/HelloWorld.vue

<script>
    import axios from 'axios'

    export default {
        name: 'HelloWorld',
        props: { //从父组件获取msg
            msg: String,
            title: Number,
        },
        mounted() {
            axios.get('https://dog.ceo/api/breeds/image/random')
                .then(function (response) {
                    console.log(response);
                    console.log(response.data);
                })
                .catch(function (err) {
                    console.log(err);
                })
        }
    }
</script>

/src/components/HelloWorld.vue

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <h2>{{ title }}</h2>
        <el-image :src="url" fit="cover"></el-image>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: 'HelloWorld',
        props: { //从父组件获取msg
            msg: String,
            title: Number,
        },
        data() {
            return {
                url: '',
            }
        },
        mounted() {
            axios.get('https://dog.ceo/api/breeds/image/random')
                .then(response => {
                    console.log(response);
                    console.log(response.data);
                    this.url = response.data.message;
                })
                .catch(function (err) {
                    console.log(err);
                });
        }
    }
</script>

<style scoped>
    h3 {
        margin: 40px 0 0;
    }
    ul {
        list-style-type: none;
        padding: 0;
    }
    li {
        display: inline-block;
        margin: 0 10px;
    }
    a {
        color: #42b983;
    }
</style>

代码封装

新建 /src/api/api.js

import axios from 'axios'


var host = 'https://dog.ceo';

export const dogs = () => {
    return axios.get(`${host}/api/breeds/image/random`)
};

修改 HelloWorld.vue

import {dogs} from '../api/api.js'


mounted() {
            dogs()
                .then(response => {
                    console.log(response);
                    console.log(response.data);
                    this.url = response.data.message;
                })
                .catch(function (err) {
                    console.log(err);
                });
        }

slot插槽

默认情况下,在子组件开始标签和结束标签中间添加的内容会忽略

/src/components/greeting.vuetemplate中增加以下内容

<hello-world>
    <p>这是Hello-world子组件</p>
</hello-world>

如果需要展示出来需要在 /src/components/HelloWorld.vue中添加:

<slot></slot>也就是插槽

如果在 slot中写入内容,那外部不使用会使用默认的:

<slot><p>喵喵喵</p></slot>

# greeting.vue
<hello-world></hello-world>

# HelloWorld.vue
<slot><p>喵喵喵</p></slot>
# greeting.vue
<p>这是Hello-world子组件</p>

# HelloWorld.vue
<slot><p>喵喵喵</p></slot>

命名插槽

# greeting.vue
<hello-world>
    <!--vue2.6之前-->
    <p slot="part1">这是Hello-world子组件</p>
    <!--vue2.6之后-->
    <!--v-slot="part2" 可以缩写为 #part2-->
    <template v-slot="part2">
    <template #part2> 
        <p>这是part2</p>
    </template>
</hello-world>

# HelloWorld.vue
<slot name="part1"><p>汪汪汪</p></slot>
<slot name="part2"><p>咳咳咳</p></slot>

插槽作用域

# greeting.vue
<hello-world>
    <!--vue2.6之前-->
    <p slot="part4" slot-scope="sope">
        {{sope.user}}:这是Hello-world子组件
    </p>
    <!--vue2.6之后-->
    <template #part4="sope">
    <p>{{sope.user}}:这是part4</p>
    </template>
    <!--简写-->
    <template #part4="{user}">
        <p>{{user}}:这是part4</p>
    </template>
</hello-world>

# HelloWorld.vu
<slot name="part4" :user="username"></slot>

本文分享自微信公众号 - 测试游记(zx94_11)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-09-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java工程师成长之路

mac下安装ELK

本文主要为自己所走弯路而做的补充,对小白(比如我)来讲某些博客讲的还是高深了,特地来此补充说明一些东西。

12930
来自专栏Java工程师成长之路

java8 parallel并行处理实战

7130
来自专栏Java工程师成长之路

pdf.js显示合同签名问题

15120
来自专栏Java工程师成长之路

ElasticSearch权威指南学习(分布式搜索)

... "timed_out": true, //搜索请求超时 "_shards": { "total": 5, "succe...

9830
来自专栏Java工程师成长之路

设计模式学习总结

http://blog.csdn.net/zhangerqing/article/details/8194653

12020
来自专栏code秘密花园

愿未来没有 Webpack

现在是 1941 年。你的名字是 Richard Hubbell。你在 CBS 旗下的一个试验性的纽约电视演播室工作。你将要主持一场重大电视新闻广播,这是世界上...

12120
来自专栏猿天地

记录一次系统性能调优过程

在线上环境,由于业务场景需要,要求程序能够在普通的4G机器中依然正常运行。而原来的环境配置为8核16G,微服务部署,一共有6个功能模块。而现在要求在一台4核4G...

12320
来自专栏changxin7

Python基础三

不可变的数据类型公用,可变的数据类型重新开辟一个空间,对源数据进行修改,深拷贝的内容不进行改变

14730
来自专栏code秘密花园

【手把手】15分钟搭一个企业级脚手架

https://juejin.im/post/5d650613f265da03951a0364

10920
来自专栏小满

android学习---下拉刷新组建

/** * The SwipeRefreshLayout should be used whenever the user * can refresh t...

9120

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励