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

最新推荐文章于 2024-07-23 16:00:30 发布

在成为巨擘的路上

最新推荐文章于 2024-07-23 16:00:30 发布

阅读量2.2k

点赞数

分类专栏： vue 文章标签： vue vue-router 路由

本文链接：https://blog.csdn.net/qq_24065713/article/details/78802993

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、目录结构,效果图。

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