vue使用router的index.js的简单例子

在 Vue.js 项目中，`index.js` 文件通常是用来初始化 Vue Router 并将它与 Vue 实例关联起来的地方。以下是一个简单的 `index.js` 示例：

// 引入必要的模块
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './views/Home.vue'
import About from './views/About.vue'

// 安装 Vue Router
Vue.use(VueRouter)

// 创建路由配置数组
const routes = [
  {
    path: '/', component: Home, // 主页路由，对应的组件是 Home.vue
  },
  {
    path: '/about', component: About, // 关于我们路由，对应组件是 About.vue
  }
]

// 创建路由实例
const router = new VueRouter({
  // 如果你希望基于 hash (#) 来实现 History API 刷新，可设置 base: '/'
  routes,
})

// 在 Vue 实例的 created 钩子中加载路由
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
})

在这个例子中，我们首先导入了 Vue 和 Vue Router，然后创建了一个路由配置数组，包含两个路径（`'/'` 和 `'/'about'`）和它们对应的组件。接着，我们用这些路由配置创建了一个新的 Vue Router 实例。最后，在 Vue 实例的生命周期钩子 `created` 中，我们将路由器绑定了到 Vue 实例上，这样当我们在 URL 中改变路径时，Vue 会自动渲染相应的组件。