<template> <nav class="mui-bar mui-bar-tab"> <router-link class="mui-tab-item-lib" :to="{name:'home'}"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首页</span> </router-link> <router-link class="mui-tab-item-lib" :to="{name:'category'}"> <span class="mui-icon mui-icon-personadd"></span> <span class="mui-tab-label">分类</span> </router-link> <router-link class="mui-tab-item-lib" :to="{name:'shopcart'}"> <span class="mui-icon mui-icon-extra mui-icon-extra-cart"> <span class="mui-badge">2</span> </span> <span class="mui-tab-label">购物车</span> </router-link> <router-link class="mui-tab-item-lib" :to="{name:'user'}"> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">我的</span> </router-link> </nav> </template>

这是一个 Vue.js 的组件模板，它定义了一个基于路由的导航栏，包含四个链接，分别是首页、分类、购物车和我的。这个导航栏使用了 MUI 框架的样式，并且在购物车链接中展示了一个徽章，表示当前购物车中有 2 件商品。每个链接使用了 Vue Router 的<router-link>组件，并通过v-bind指令动态绑定了链接的目标路由地址。