vue路由例項（vue-router）（vue版本2.9.2）

一、目錄結構,效果圖。

 

 

 

二、main.js。是程式入口檔案

import Vue from 'vue'

import App from './App'

import router from './router'

// 註冊一個元件

new Vue({

  el: '#app',

  router,

  template: '<App/>',

  components: { App }

})

三、index.js

import Vue from 'vue'

import Router from 'vue-router'

import goods from '../components/goods.vue'

import lab from '../components/mylab.vue'

Vue.use(Router)

export default new Router({

  routes: [

    {

      path: '/goods',

      name: 'goods',

      component: goods

    },

    {

      path: '/lab',

      component: lab

    }

  ]

})

四、app.vue

<template>

  <div id="app">

    <router-view></router-view>

  </div>

</template>

<script>

     export default {

        data () {}

     }

</script>

<style>

</style>

五、mylab.vue

<template>

  <div id="app">

    <div class="tab">

      <div class="tab-item">

        <router-link to="/goods">  商品</router-link>

      </div>

      <div class="tab-item">

        <router-link to="/ratings">  評論</router-link>

      </div>

      <div class="tab-item">

        <router-link to="/seller">  商家</router-link>

      </div>

    </div>

  </div>

</template>

<script>

  export default {

    name: 'mylab',

    data () {

      return {}

    }

  }

</script>

<style scoped>

  .tab{

    display: flex;

  }

  .tab-item{

    flex: 1;

    text-align: center;

  }

</style>

六、goods.vue

<template>

  <div>

    <h1>  我是goods</h1>

    <h1>  我是goods</h1>

  </div>

</template>

<script>

  export default {

    name: 'goods',

    data () {

      return {}

    }

  }

</script>

<style scoped>

</style>