使用vue实现一个商品列表页面

首先，我们需要创建一个Vue实例，并引入Vue和Vue-Router库。然后，我们需要在Vue实例中定义商品列表数据和商品列表组件。接着，我们需要在路由中定义商品列表页面的路径和组件，并在Vue实例中使用Vue-Router库来实现路由跳转。

下面是一个简单的示例代码：

// 引入Vue和Vue-Router库
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 定义商品列表数据
const goodsList = [
  {id: 1, name: '商品1', price: 100},
  {id: 2, name: '商品2', price: 200},
  {id: 3, name: '商品3', price: 300},
  {id: 4, name: '商品4', price: 400},
  {id: 5, name: '商品5', price: 500}
]

// 定义商品列表组件
const GoodsList = {
  data() {
    return {
      goodsList: goodsList
    }
  },
  template: `
    <div>
      <h1>商品列表</h1>
      <ul>
        <li v-for="item in goodsList" :key="item.id">
          {{ item.name }} - {{ item.price }}元
        </li>
      </ul>
    </div>
  `
}

// 定义路由
const routes = [
  { path: '/goods', component: GoodsList }
]

// 创建Vue-Router实例
const router = new VueRouter({
  routes
})

// 创建Vue实例
new Vue({
  el: '#app',
  router
})

在HTML中，我们需要添加一个id为app的div，并在其中添加一个router-view标签用于显示路由组件。

<div id="app">
  <router-view></router-view>
</div>

接着，我们就可以通过访问http://yourdomain.com/#/goods来查看商品列表页面了。