1.嵌套路由
{
path: '/home',
name: 'home',
component: Home,
children: [{
path: 'HomeFirst',
name:'first',
component: SonFirst
}, {
path: 'HomeSecond',
name:'second',
component: SonSecond
},
{
path:'HomeThree',
name:'three',
component:SonThree
},
// 当跳转路径没有时
{
path:'*',
redirect:'/'
}
]
},
在里面嵌套children数组配置项,里面就是路由里面的子路由
//引入Vue
import Vue from "vue";
//引入views文件夹下的两个路由跳转的vue的文件
// import About from '../views/About.vue';
import Home from '../views/Home.vue';
//引入路由对象
import VueRouter from 'vue-router';
//引入路由子组件
import SonFirst from '../views/HomeSonFirst.vue'
import SonSecond from '../views/HomeSonSecond.vue'
import SonThree from '../views/HomeSonThree.vue'
//使用路由
Vue.use(VueRouter);
//创建路由器
const routes = [
//在路由对象里面注册引入的对应的状态框组件
//懒加载,页面切换加载组件
{
path: '/about',
name: 'about',
component: () => import('../views/About.vue')
},
{
path: '/home',
name: 'home',
component: Home,
children: [{
path: 'HomeFirst',
name:'first',
component: SonFirst