https://router.vuejs.org/zh/guide/#html
https://router.vuejs.org/zh/guide/essentials/nested-routes.html
目标
- 简单路由
- 路由嵌套
用 Vue.js + Vue Router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。
1、简单的路由
app.vue
<template>
<div id="app">
<router-link to="/home">主页</router-link>
<router-link to="/props">props</router-link>
<router-link to="/parentjson">parentjson</router-link>
<router-link to="/refparent">refparent</router-link>
<!-- <img src="./assets/logo.png"> -->
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
router/index.js
import props from '@/components/props/parent'
import parentjson from '@/components/props/parentjson'
import refparent from '@/components/refs/parent'
{
path: '/props',
name: 'props',
component: props
},
{
path: '/parentjson',
name: 'parentjson',
component: parentjson
},
{
path: '/refparent',
name: 'refparent',
component: refparent
}
这样就可以在多个页面间自由切换了
2、路由嵌套
要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：
例1
新增加三个vue
index.vue
top.vue
middle.vue
<template>
<div>
<top></top>
<middle></middle>
<!--路由出口 路由到的地址在这儿显示 -->
</div>
</template>
<script>
import top from '@/components/router/top'
import middle from '@/components/router/middle'
export default{
data(){
return {}
},
components:{
top,middle
}
}
</script>
<style>
</style>
<template>
<div class="top">top</div>
</template>
<script>
export default{
data(){
return {}
}
}
</script>
<style>
.top{
margin:0;
width:100vw;
height:10vh;
background-color: #42B983;
}
</style>
<template>
<div class="middle">
<router-link to="/parent">parent</router-link>
<router-link to="/parent01">parent01</router-link>
<router-link to="/parent02">parent02</router-link>
<!--路由出口 路由到的地址在这儿显示 -->
<router-view/>
</div>
</template>
<script>
export default{
data(){
return {}
}
}
</script>
<style>
.middle{
width: 100vw;
height: 50vh;
background-color: aliceblue;
}
</style>
路由配置
import index from '@/components/router/index'
{
path: '/index',
name: 'index',
component: index,
//children:[{},{}]
children:[{
path: '/parent',
name: 'parent',
component: parent
},
{
path: '/parent01',
name: 'parent01',
component: parent01
}
]
}
测试
浏览器输入地址，他会自动嵌入到子组件里
关键代码
嵌套路由及子组件中的 <router-view/>
{
path: '/index',
name: 'index',
component: index,
//children:[{},{}]
children:[{
path: '/parent',
name: 'parent',
component: parent
},
{
path: '/parent01',
name: 'parent01',
component: parent01
}
]
}
