嵌套路由
场景：父页面打开，再打开子页面
借鉴官方示例：
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> 复制