vue-router的base和mode配置项

vue-router的base和mode配置项

  路由代码如下:

const router = new VueRouter({
  mode: 'history',
  base: '/vue',
  routes
})

  1) mode
   mode: 'history’表示,访问路径不带#号,如:http://localhost:8080/vue

在这里插入图片描述
  2) base
  配置单页应用的基路径,当点击路由时:

      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>

  会带上项目基路径,如:http://localhost:8080/vue/about
在这里插入图片描述
  浏览器地址栏http://localhost:8080/vue/这样访问,表示是访问该项目

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
对于vue-admin-template动态菜单,你可以通过以下步骤来实现: 1. 首先,在你的目中创建一个菜单配置文件,可以是一个数组或者一个JSON文件,用来存储菜单的结构和信息。例如: ``` const menuConfig = [ { name: 'Dashboard', path: '/dashboard', icon: 'el-icon-s-home' }, { name: 'User Management', path: '/user', icon: 'el-icon-user', children: [ { name: 'User List', path: '/user/list' }, { name: 'Add User', path: '/user/add' } ] } // 其他菜单... ]; ``` 2. 在你的目中的侧边栏组件(Sidebar)中,引入上面的菜单配置文件,并使用v-for指令遍历菜单,生成动态菜单。例如: ```html <template> <div class="sidebar"> <ul> <li v-for="item in menuConfig" :key="item.name"> <router-link :to="item.path"> <i :class="item.icon"></i> {{ item.name }} </router-link> <ul v-if="item.children"> <li v-for="child in item.children" :key="child.name"> <router-link :to="child.path">{{ child.name }}</router-link> </li> </ul> </li> </ul> </div> </template> <script> import menuConfig from '@/config/menuConfig'; // 菜单配置文件的路径 export default { data() { return { menuConfig: menuConfig }; } }; </script> ``` 3. 使用Vue Router来实现菜单的路由功能。在你的目中配置路由表(router/index.js),根据菜单配置文件中的路径信息来设置对应的路由。例如: ```javascript import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const routes = [ { path: '/dashboard', component: () => import('@/views/Dashboard') }, { path: '/user/list', component: () => import('@/views/UserList') }, { path: '/user/add', component: () => import('@/views/AddUser') } // 其他路由配置... ]; const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }); export default router; ``` 这样,当你在菜单中点击某个菜单时,Vue Router会根据对应的路径加载相应的组件,实现动态菜单的效果。 希望以上步骤对你有所帮助!如有疑问,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值