vue-router实现简单vue多页切换、嵌套路由、路由跳转

import Vue from 'vue'
import VueRouter from 'vue-router'
 
// 引入页面组件
import PageA from './components/PageA.vue'
import PageB from './components/PageB.vue'
import PageC from './components/PageC.vue'
 
// 使用VueRouter
Vue.use(VueRouter)
 
// 定义路由
const routes = [
  {
    path: '/',
    component: PageA,
    children: [
      { path: 'b', component: PageB },
      { path: 'c', component: PageC }
    ]
  }
]
 
// 创建router实例
const router = new VueRouter({
  mode: 'history', // 使用HTML5 History模式
  routes // （缩写）相当于 routes: routes
})
 
// 创建和挂载根实例
new Vue({
  router // （缩写）相当于 router: router
}).$mount('#app')
 
// 现在你可以使用 router.push 来导航到不同的路由
// 例如：router.push('home')

这段代码展示了如何在Vue应用中使用Vue Router来定义嵌套路由，并通过router.push方法来实现路由跳转。这是Vue开发中常用的技巧之一，对于学习Vue.js的开发者来说具有很好的教育价值。