Vue-router（3）之 子路由

在（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文件：

 

转载于:https://www.cnblogs.com/houfee/p/10006428.html