Vue2从入门到精通：全面掌握前端开发利器Vue.js！（第十二部分路由Router.js部分）

// 引入Vue和VueRouter
import Vue from 'vue'
import VueRouter from 'vue-router'
 
// 定义路由组件
import Home from './components/Home.vue'
import About from './components/About.vue'
 
// 应用VueRouter插件
Vue.use(VueRouter)
 
// 创建VueRouter实例并配置路由
const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})
 
// 创建Vue实例并传入路由
new Vue({
  router,
  // 渲染App.vue组件到#app元素
  render: h => h(App)
}).$mount('#app')

这段代码演示了如何在Vue2项目中设置Vue Router，并将其挂载到Vue实例上。它首先引入Vue和VueRouter，然后定义了两个路由组件Home和About。接着创建了VueRouter实例，并配置了路由规则。最后，创建了一个新的Vue实例，并通过router选项将Vue Router挂载到这个实例上，然后将根组件渲染到页面的#app元素中。