vue学习笔记---tap切换配置（vue-router）

最新推荐文章于 2023-09-15 18:00:23 发布

to u be

最新推荐文章于 2023-09-15 18:00:23 发布

阅读量3.4k

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/yu88288356/article/details/54766836

vue 同时被 2 个专栏收录

8 篇文章

订阅专栏

vue-router

1 篇文章

订阅专栏

本文介绍了一个使用 Vue 和 Vue Router 构建的简单电商应用案例，包括商品、评论和商家三个页面的路由配置与实现方式。通过该案例可以了解 Vue Router 的基本用法，如组件懒加载、路由守卫等。

商品

商家

（main.js里面的配置）
import Vue from ‘vue’
import App from ‘./App’
import goods from ‘components/goods/goods’
import ratings from ‘components/ratings/ratings’
import seller from ‘components/seller/seller’
import VueRouter from ‘vue-router’Vue.use(VueRouter)

Vue.use(VueRouter)//实例化vueRouter
// 将App.vue组件扩展接口给app，实际上就是将APP继承给app–>
let app = Vue.extend(App)
// 实例化路由，并且将点击链接后类名简写为active–>
let router = new VueRouter({
linkActiveClass: ‘active’
})
// 设置路由地图–>
router.map({
‘/’: {
component: goods
},
‘/goods’: {
component: goods
},
‘/ratings’: {
component: ratings
},
‘/seller’: {
component: seller
}
})
// 启动路由将 app组件挂到html#app下面–>
router.start(app, ‘#app’)

<template>
  <div>
    <v-header :seller="seller"></v-header>
    <div class="tab border-1px">
      <div class="tab-item">
        <a v-link="{path:'/goods'}">商品</a>
      </div>
      <div class="tab-item">
        <a v-link="{path:'/ratings'}">评论</a>
      </div>
      <div class="tab-item">
        <a v-link="{path:'/seller'}">商家</a>
      </div>
    </div>
    <router-view :seller="seller" keep-alive></router-view>
  </div>
</template>