vuejs入门-子路由（三）

上次说了整页导航，这次我们说页面局部导航
局部导航白话就是：页面局部刷新或是视图局部刷新

1.搭建项目:
vue init webpack tj1
2.按图创建文件：

clipboard.png

3.运行案例，然后看源码自己体会:
index.html:

pages/First.vue:

pages/Second.vue:

pages/sec/Sec1.vue:

pages/sec/Sec2.vue:

pages/sec/Sec3.vue:

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}
],
}
/*
这么写就成了一级页面的跳转了，而不是二级局部跳转
{path: '/Sec1',component: Sec1},
{path: '/Sec2',component: Sec2},
{path: '/Sec3',component: Sec3},
*/
]

// 创建路由实例
const router = new VueRouter({
routes
})

// 创建 Vue 实例
new Vue({
el: '#app',/* 对应index.html的div的id="app" */
data(){
return {
}
},
router
})