測試開發進階(十九)
- 2019 年 10 月 6 日
- 筆記
嵌套路由
場景：父頁面打開，再打開子頁面
借鑒官方示例：
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.vue的 template中添加以下內容
<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.vue的 template中增加以下內容
<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>
