vue3仿美团项目(3)-路由配置及切换

最新推荐文章于 2024-08-11 21:33:22 发布

一起来学计算机

最新推荐文章于 2024-08-11 21:33:22 发布

阅读量347

点赞数

分类专栏： vue3-project 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_57469571/article/details/130660525

版权

vue3-project 专栏收录该内容

9 篇文章 4 订阅

订阅专栏

该文详细介绍了在Vue项目中安装和配置vue-router的过程，包括创建新页面、设置路由、在main.js中引入以及在App.vue中配置路由出口。此外，还展示了如何创建组件（如Footer.vue）用于页面间的导航，并提供了使用vant库来美化界面的提示。

摘要由CSDN通过智能技术生成

一、安装

npm i vue-router@4 -S

二、创建页面

1.创建需要的页面（注意是在 src下创建）

2.以mine.vue举例

<template>
    <div class="mine">
     <div class="content">我的</div>
    </div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
    name:'App',
    
})
</script>

注：需要把 script标签中的 lang="ts"给删掉，否则会报如下的错误（因为项目中未安装ts）。

三、配置

1.在index.js中配置（为hash模式）

import { createRouter, createWebHashHistory } from "vue-router"

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            path: "/",
            component: () => import("../pages/myHome/MyHome.vue")
        },
        {
            path: "/home",
            component: () => import("../pages/myHome/MyHome.vue")
        },
        {
            path: "/mine",
            component: () => import("../pages/mine/Mine.vue")
        },
        {
            path: "/cart",
            component: () => import("../pages/myCart/MyCart.vue")
        },
        {
            path: "/order",
            component: () => import("../pages/myOrder/MyOrder.vue")
        }

    ]
})

export default router

2.在main.js中引入一下

import router from './router'

const app = createApp(App)
app.use(router)

3.在 App.vue中配置路由出口

<template>
  <router-view> </router-view>
</template>

四、测试效果

在地址栏输入不同的路由，展示对应的组件即为成功。

五、切换组件

1.在 components在创建Footer.vue组件(用来展示不同的页面)

<template>
  <div class="item">
    <router-link to="/home" class="nav_item" active-class="nav_color">首页</router-link>
    <router-link to="/cart" class="nav_item" active-class="nav_color">购物车</router-link>
    <router-link to="/order" class="nav_item" active-class="nav_color">订单</router-link>
    <router-link to="/mine" class="nav_item" active-class="nav_color">我的</router-link>
  </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "App",
});
</script>

2.在pages下使用一下组件(以mine.vue为例子)

<template>
  <div class="mine">
    <div class="content">我的</div>
    <Footer />
  </div>
</template>
<script>
import { defineComponent } from "vue";
import Footer from "../../components/Footer.vue";
export default defineComponent({
  name: "App",
  components: { Footer },
});
</script>

3.效果