// src/router/routes.ts
import type { RouteRecordRaw } from 'vue-router'
const routes: RouteRecordRaw[] = [
// 文章相关的路由统一放在这里管理
{
path: '/article',
name: 'article',
// 这是一个配置了 `<router-view />` 标签的路由中转站组件
// 目的是使其可以渲染子路由
component: () => import('@cp/TransferStation.vue'),
// 由于父级路由没有内容,所以重定向至列表的第 1 页
// e.g. `https://example.com/article`
redirect: {
name: 'article-list',
params: {
page: 1,
},
},
children: [
// 文章列表页
// e.g. `https://example.com/article/list/1`
{
path: 'list/:page',
name: 'article-list',
component: () => import('@views/article/list.vue'),
},
// 文章详情页
// e.g. `https://example.com/article/detail/1`
{
path: 'detail/:id',
name: 'article-detail',
component: () => import('@views/article/detail.vue'),
},
],
},
]
export default routes
标签:技巧,list,detail,import,命名,article,路由,name
From: https://www.cnblogs.com/openmind-ink/p/17029328.html