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>