https://router.vuejs.org/zh/guide/#html
https://router.vuejs.org/zh/guide/essentials/nested-routes.html
目標(biāo)
- 簡單路由
- 路由嵌套
用 Vue.js + Vue Router 創(chuàng)建單頁應(yīng)用凝危，是非常簡單的军俊。使用 Vue.js 尉共，我們已經(jīng)可以通過組合組件來組成應(yīng)用程序褒傅，當(dāng)你要把 Vue Router 添加進(jìn)來，我們需要做的是袄友，將組件 (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 的參數(shù)中使用 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
}
]
}
測試
瀏覽器輸入地址，他會自動嵌入到子組件里
關(guān)鍵代碼
嵌套路由及子組件中的 <router-view/>
{
path: '/index',
name: 'index',
component: index,
//children:[{},{}]
children:[{
path: '/parent',
name: 'parent',
component: parent
},
{
path: '/parent01',
name: 'parent01',
component: parent01
}
]
}
