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

最新推荐文章于 2025-11-18 09:35:02 发布

原创最新推荐文章于 2025-11-18 09:35:02 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue-router #路由

vue 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个使用Vue.js构建的应用程序实例，详细展示了main.js作为程序入口的作用、index.js中路由配置的方式、app.vue作为主要布局文件的功能以及mylab.vue和goods.vue两个具体组件的实现细节。

一、目录结构,效果图。

二、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>