上次說了整頁導(dǎo)航，這次我們說頁面局部導(dǎo)航
局部導(dǎo)航白話就是：頁面局部刷新或是視圖局部刷新
1.搭建項目:
vue init webpack tj1
2.按圖創(chuàng)建文件：
3.運行案例，然后看源碼自己體會:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tj1</title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
</body>
</html>
pages/First.vue:
<template>
<div>
<span>第1個頁面</span>
<router-link to="/secod" >內(nèi)容頁</router-link>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
<style scoped>
span{
font-weight: normal;
color:red
}
</style>
pages/Second.vue:
<template>
<div>
<span>第2個頁面</span>
<router-link to="/" >首頁</router-link>
<router-view></router-view>
<router-link to="/secod" >第1個子頁面</router-link>
<router-link to="/sec2" >第2個子頁面</router-link>
<router-link to="/sec3" >第3個子頁面</router-link>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
<style scoped>
span{
font-weight: normal;
color:red
}
</style>
pages/sec/Sec1.vue:
<template>
<span>第1個子頁面</span>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
<style scoped>
span{
font-weight: normal;
color:red
}
</style>
pages/sec/Sec2.vue:
<template>
<span>第2個子頁面</span>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
<style scoped>
span{
font-weight: normal;
color:red
}
</style>
pages/sec/Sec3.vue:
<template>
<span>第3個子頁面</span>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
<style scoped>
span{
font-weight: normal;
color:red
}
</style>
main.js:
import Vue from 'vue'
import VueRouter from 'vue-router'
import First from './pages/First'
import Secod from './pages/Secod'
import Sec1 from './pages/sec/Sec1'
import Sec2 from './pages/sec/Sec2'
import Sec3 from './pages/sec/Sec3'
Vue.use(VueRouter)
// 定義路由配置
const routes = [
{path: '/',component: First},
{path: '/secod',
component: Secod,
children: [
{path: '/',component: Sec1},
{path: '/sec2',component: Sec2},
{path: '/sec3',component: Sec3}
],
}
/*
這么寫就成了一級頁面的跳轉(zhuǎn)了，而不是二級局部跳轉(zhuǎn)
{path: '/Sec1',component: Sec1},
{path: '/Sec2',component: Sec2},
{path: '/Sec3',component: Sec3},
*/
]
// 創(chuàng)建路由實例
const router = new VueRouter({
routes
})
// 創(chuàng)建 Vue 實例
new Vue({
el: '#app',/* 對應(yīng)index.html的div的id="app" */
data(){
return {
}
},
router
})
