新建完整的路由,并提供导览进入大部分页面(进入页面仅需要文字,不必加入实际的页面)
使用 Vue Cli 完成路由设定
前台页面:
在 Vue Cli 中完成登入验证
後台页面:
前台页面:
後台页面:
//
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
component: () => import('../views/Home.vue'),
children: [
{
path: '',
name: '首页',
component: () => import('../views/Index.vue')
},
{
path: '/about',
name: '关於我们',
component: () => import('../views/About.vue')
},
{
path: '/products',
name: '产品列表',
component: () => import('../views/Products.vue')
},
{ // 动态路由
path: '/product/:id',
name: '产品页面',
component: () => import('../views/Product.vue')
},
{
path: '/cart',
name: '购物车',
component: () => import('../views/Cart.vue')
},
{
path: '/order',
name: '购物车结帐',
component: () => import('../views/Order.vue')
},
{
path: '/checkout',
name: '购物车结帐完成',
component: () => import('../views/Checkout.vue')
}
]
},
{
path: '/login',
name: '登入页',
component: () => import('../views/Login.vue')
},
// 巢状路由(管理介面)
{
path: '/admin',
name: '管理页面',
component: () => import('../views/dashboard/Dashboard.vue'),
children: [
{
path: 'products',
name: '管理产品列表',
component: () => import('../views/dashboard/Products.vue')
},
{
path: 'coupons',
name: '管理优惠券',
component: () => import('../views/dashboard/Coupons.vue')
},
{
path: 'order',
name: '订单列表',
component: () => import('../views/dashboard/Order.vue')
},
{
path: 'storages',
name: '图片储存列表',
component: () => import('../views/dashboard/Storages.vue')
}
]
}
]
const router = new VueRouter({
routes
})
export default router
<<: [Day30] 持续整合与部署 - 我与 ASP.NET Core 3 的 30天
>>: Day 29:IRQ (Part 3) - 这是核心执行绪的味道!Threaded IRQ
数据管理员(Data Steward) 数据管理员是组织中的一个角色,负责利用组织的数据治理流程来...
放烟火 2 ( 爆炸效果 ) 教学原文参考:放烟火 2 ( 爆炸效果 ) 这篇文章会延续「放烟火 1...
今天是「我的JavaScript日常」的第一天,希望能透过分享与大家一起学习、提升。 在我的学习经验...
今天练习的主题是用Vue实现列表的展开与隐藏功能 会分为两个范例让大家做演练 范例一 先将isSho...
前言 前一篇我们聊了一些字典有趣的取值方式,所以接下来我想接着继续聊关於字典的部分。 字典取值 在 ...