在(2)的基础上设置 “关于的”子路由
在index.js中导入子路由组件 以及 对应的路由关系
// 导入需要使用路由切换的组件 import Home from './Home.vue' import Movie from './Movie.vue' import About from './About.vue' // 子路由 import tab1 from './tab/tab1.vue' import tab2 from './tab/tab2.vue' // 3. 创建路由对象 前端路由: hash 值 到 组件的对应关系; 一个 hash 对应一个要展示的组件 const router = new VueRouter({ // routes 是 路由规则数组,其中的每个对象,都是一条路由规则: // 路由规则的基本组成部分: { path: 'hash值', component: 要展示的组件 } routes: [ // 通过 redirect 属性,可以实现前端路由的重定向; { path: '/', redirect: '/home' }, { path: '/home', component: Home }, { path: '/movie', component: Movie }, { path: '/about', component: About, // 可以使用 redirect 实现 嵌套子路由的重定向 redirect: '/about/tab1',
// 子路由 children: [ {path: '/about/tab1', component: tab1}, {path: '/about/tab2', component: tab2} ]} ], linkActiveClass: 'my-active' // 被激活的路由的类名, 默认类名为 router-link-active })
在about文件导入
tab1和tab2文件: