vue2.0+vue-router构建一个简单的列表页的示例代码

下面是“vue2.0+vue-router构建一个简单的列表页”的完整攻略：

步骤一：创建项目

首先，我们需要创建一个空项目，可以通过以下命令来创建：

vue create my-project

创建完成后，进入项目的根目录，安装 vue-router 依赖：

npm install vue-router --save

步骤二：配置路由

在 src 目录下创建一个 router 目录，然后在该目录下创建一个 index.js 文件，作为路由配置文件。在 index.js 文件中，先引入 Vue 和 VueRouter：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

接下来，定义路由表：

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/about',
    component: () => import('../views/About.vue')
  }
]

这里我们定义了三个路由，分别是根路由、Home 页面和 About 页面，其中根路由重定向到 Home 页面。

最后，创建路由实例：

const router = new VueRouter({
  routes
})

export default router

步骤三：创建页面组件

在 src 目录下创建一个 views 目录，用于存放页面组件。我们在该目录下创建 Home.vue 和 About.vue 两个文件，分别代表 Home 页面和 About 页面。这里我们以 Home 页面为例：

<template>
  <div>
    <h1>Home</h1>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['item1', 'item2', 'item3']
    }
  }
}
</script>

这里我们简单创建了一个包含列表的页面组件。通过 v-for 遍历 list 数组中的数据，在页面中渲染出列表。

步骤四：挂载路由

在 main.js 中，引入创建好的路由实例，并挂载到根实例上：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

最后，我们就可以像访问普通页面一样访问我们创建的列表页面了。

以上就是使用 vue2.0+vue-router 构建一个简单的列表页的示例代码。在示例中，我们使用了一个列表页面组件，在路由配置文件中定义了三个路由，并把路由实例挂载到了根实例上。如果你想添加更多的页面组件，只需要在路由表中添加新的路由即可。