vue项目级路由架构带你从零搭建 [新手秒懂]_import { layout } from ‘ant-design-vue‘；

最新推荐文章于 2024-08-28 08:48:54 发布

2401_84447417

最新推荐文章于 2024-08-28 08:48:54 发布

阅读量231

点赞数 5

文章标签： vue.js 架构 javascript

本文链接：https://blog.csdn.net/2401_84447417/article/details/138237158

版权

本文介绍了如何使用Vue.js构建项目级别的路由结构，包括设置路由、使用懒加载和导入自定义布局组件。同时，展示了如何集成NProgress库来实现页面加载进度条，提升用户体验。通过`router.beforeEach`和`router.afterEach`钩子函数，控制NProgress的开始和结束。

摘要由CSDN通过智能技术生成

...
<router-view />

...


运行项目，在路径为’/'时，路由视口会替换为组件Home。


### 二 登录与注册路由配置


在router.js中进行路由配置，设立一级路由/user，同对象children属性中为其子路由。


一级路由为子路由路径前缀，当路径与子路由path相等时，页面为一级路由component组件内容，组件内容中的router-view标签替换为子路由组件内容。


建立一级路由组件userLayout.vue，要求含有routerview标签。


建立登录页面与注册页面组件login.vue与register.vue。

export default new Router({
routes: [
{
path: ‘/user’,
// 需要一个含有routerview的组件
// component: { render: h => h(‘router-view’) },
component: () => import(‘…/layouts/userLayout’),
children: [
{
path: ‘/user’,
redirect: ‘/user/login’
},
{
path: ‘/user/login’,
name: ‘login’,
component: () => import(‘…/views/user/login’)
}, {
path: ‘/user/register’,
name: ‘register’,
component: () => import(‘…/views/user/reg