vue-router页面跳转

vue-router页面跳转

Vue-Router的教程地址https://router.vuejs.org/zh-cn/

我们在建立项目的时候命令行如下：

$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

最新的项目已经自动安装了vue-router 下面介绍步骤

一、vue组件中添加标签，格式如下

 <div class="tab">
      <div class="tab-item">
        <router-link to="/goods">商品</router-link></div>
      <div class="tab-item">
        <router-link to="/rating">评论</router-link></div>
      <div class="tab-item">
        <router-link to="/seller">商家</router-link></div>
    </div>
    <router-view></router-view>

二、router文件夹下的index.js文件

export default new Router({
  routes: [
    {
      path: '/goods',
      component: Goods
    },
    {
      path: '/rating',
      component: Ratings
    },
    {
      path: '/seller',
      component: Seller
    }
  ]
})

其实现在新建的项目已经帮我们集成好了，我们只需要配置上面两部即可，直接去看文档反而，有些云里雾里。希望能给需要的人一些帮助。