Vue3中Vue-Router的使用

Vue-Router的使用

基本搭建过程：

文档：入门 | Vue Router

第0步：安装vue-router： pnpm i vue-router

第一步：创建router对象并导出。

在src下新建目录router，router下新建文件index.js

import { createWebHistory, createRouter } from "vue-router";

import Home from "../pages/Home.vue";
import Cart from "../pages/Cart.vue";

const routes = [
  { path: "/", component: Home },
  { path: "/cart", component: Cart },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

注意！相比于文档中使用的『createMemoryHistory』，这里改为使用createWebHistory

相关的页面，集中在src目录下的pages目录中创建

第二步：在main.js中引入router对象并放到use上

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

createApp(App).use(router).mount("#app");

第三步：在核心的App.vue中使用RouterView组件展现路由页面

<script setup>
import { RouterView } from 'vue-router';
</script>

<template>
  <RouterView />
</template>

<style scoped></style>

注意！不仅仅是App.vue中需要使用RouterView展现路由页面；所有涉及到父子路由的，在父路由对应的页面中，都需要使用RouterView才能展现子路由对应的页面。

设计路由的基本结构

设计思路：基本布局相同的，放到一起，有一个共同的父路由；布局不同的，以兄弟路由形式存在。

比如：登录页和登录之后的页面布局不同，并列存在；登录之后的首页、购物车页、个人中心页和订单页，都有底部导航，页面布局相同，所以让他们一起作为Layout对应路由的子路由页面。

示例：

import { createWebHistory, createRouter } from "vue-router";

import Layout from "../pages/Layout.vue";
import Home from "../pages/Home.vue";
import Cart from "../pages/Cart.vue";
import Mine from "../pages/Mine.vue";
import Order from "../pages/Order.vue";
import Login from "../pages/Login.vue";

const routes = [
  {
    path: "/",
    component: Layout,
    children: [
      {
        path: "/home",
        component: Home,
      },
      {
        path: "/cart",
        component: Cart,
      },
      {
        path: "/mine",
        component: Mine,
      },
      {
        path: "/order",
        component: Order,
      },
    ],
  },
  {
    path: "/login",
    component: Login,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

其中，Layout.vue中需要放置底部导航组件，点击后能够跳转到对应页面。Layout.vue作为父路由的页面，需要放入RouterView，才能让它的子路由对应页面显示出来！

<!-- Layout.vue -->
<script setup>
import { RouterView } from 'vue-router';
</script>
<template>
  <RouterView />
  <div>底部导航菜单放这里</div>
</template>
<style scoped></style>

主模块引入VantUI的底部导航组件

文档：Vant 4 - A lightweight, customizable Vue UI library for mobile web apps.

1.  安装VantUI：pnpm i vant

2.  在main.js中引入样式，引入底部导航组件

import { createApp } from "vue";
// import './style.css'
import "vant/lib/index.css";
import App from "./App.vue";
import router from "./router";

import { Tabbar, TabbarItem } from "vant";

createApp(App).use(router).use(Tabbar).use(TabbarItem).mount("#app");

3.  在Layout.vue中使用底部导航组件

<script setup>
import { RouterView } from 'vue-router';
</script>
<template>
  <RouterView />
  <van-tabbar route>
    <van-tabbar-item replace to="/home" icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item replace to="/cates" icon="apps-o">分类</van-tabbar-item>
    <van-tabbar-item replace to="/cart" icon="cart-o">购物车</van-tabbar-item>
    <van-tabbar-item replace to="/mine" icon="contact-o">我的</van-tabbar-item>
  </van-tabbar>
</template>
<style scoped></style>