vue项目级路由架构带你从零搭建 [新手秒懂]

Posted 2021-08-08 前端呆头鹅

文章目录

• • 一 路由引入与使用
  • • 1.1 新建路由文件
    • 1.2 注册路由
  • 二 登录与注册路由配置
  • 三 内容菜单路由配置
  • • 3.1 路由配置
    • 3.2 Layout组件示例
  • 四 配置404页面
  • 五 添加路由跳转动画
  • 六 布局优化

成果展示：

一 路由引入与使用

1.1 新建路由文件

首先在脚手架中添加文件router.js。

import Vue from 'vue'
import Router from 'vue-router'
import Home from './view/home'

Vue.use(Router)

export default new Router({
    mode: 'history', // ’hash'
    base: './',
    routes: [
        {
            path: "/",
            name: "home",
            component: Home
        }
    ]
});

1.2 注册路由

在main.js中注册该文件。

...
import router from './router' // 添加
...

new Vue({
  router,  // 添加
  render: h => h(App),
}).$mount('#app')

在app.vue中插入路由视口。

<template>
  <div id="app">
    ...
    <router-view />
  </div>
</template>
...

运行项目，在路径为’/'时，路由视口会替换为组件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/register')
        }
      ]
    }
  ]
})

// /layouts/userLayout示例
<template>
    <div>
        <div>HelloWorld</div>
        <router-view/>
    </div>
</template>

启动项目，可以通过地址访问对应页面。

http://localhost:8080/#/user/login
http://localhost:8080/#/user/register

三 内容菜单路由配置

3.1 路由配置

菜单内容相关路由，通常包含两到三层。

也就是说最外面有一个壳子，与user并列，为无论任何路由下都展示的部分，通常放置header与footer组件与背景布局等。

children内放置一级路由，内children再嵌套二层路由。

    {
      path: '/user',
      ...
    },
	{
      path: '/',
      component: () => import('./layouts/basicLayout'),
      children: [
        {
          path: '/dashboard',
          name: 'dashboard',
          // render: h => h('router-view')将返回一个仅有router-view标签的组件
          component: {render: h => h('router-view')},
          children: [{
            path: '/dashboard/analysis',
            name: 'analysis',
            component: () => import('../views/dashboard/analysis')
          },{
            path: '/dashboard/analysis2',
            name: 'analysis2',
            component: () => import('../views/dashboard/analysis2')
          }]
        }
      ]
    },

通常在壳子中，也就是上文的Layout系列中，会放置当前路径的公共背景组件和同级children中子路由对应的router-link菜单。

3.2 Layout组件示例

下面给出一个组件basicLayout示例，里面包含组件header footer和siderMenu，内容区域为router-view，是一个标准的设计。

<template>
    <div>
        <Header />
        <sider-menu />
        <router-view/>
        <Footer />
    </div>
</template>

<script>
import Header from './header.vue'
import Footer from './footer.vue'
import SiderMenu from './sideMenu.vue'

export default {
  components: {
    Header,
    Footer,
    SiderMenu
  }
}
</script>

使用router-link标签制作菜单，sideMenu组件示例，该菜单中包含一级导航。

<template>
    <div>
        <div>sideMenu</div>
        <router-link to="/dashboard/analysis">仪表盘</router-link>
        <router-link to="/form/form1">表单</router-link>
    </div>
</template>

该组件的内容，在以其为前缀的子路由中跳转时是始终展示的。

四 配置404页面

最后我们添加404页面，当输入未定义的路由时展示。

    {
      path: '*',
      name: '404',
      component: () => import('../views/404')
    }

五 添加路由跳转动画

动画效果可以使用现有插件nprogress完成。

首先安装依赖。

npm i nprogress

在路由文件中引入并在路由钩子函数中使用该插件。

...
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

const router = new Router({routes: [...]});
      
router.beforeEach((to, form, next) => {
  NProgress.start()
  next()
})

router.afterEach(() => {
  NProgress.done()
})

export default router

现在点击菜单切换路由，已经可以看到跳转动画效果了。

六 布局优化

整体布局，首先可以从ui组件库中复制粘贴布局代码，将header等组件放置到对应位置即可。

打开组件网址找到侧边布局代码。

https://www.antdv.com/components/layout-cn/

修改后粘贴到basicLayout.vue位置。

<template>
    <div>
        <a-layout id="components-layout-demo-side" style="min-height: 100vh">
            <a-layout-sider v-model="collapsed" collapsible>
                <div class="logo" />
                <sider-menu />
            </a-layout-sider>
            <a-layout>
                <a-layout-header style="background: #fff; padding: 0" >
                    <Header />
                </a-layout-header>
                <a-layout-content style="margin: 0 16px">
                    <router-view/>
                </a-layout-content>
                <a-layout-footer style="text-align: center">
                    <Footer />
                </a-layout-footer>
            </a-layout>
        </a-layout>
    </div>
</template>

<script>
...

export default {
  data () {
    return {
      collapsed: false
    }
  },
  ...
}
</script>

既然使用该该组件库，就要引入。

 npm i --save ant-design-vue

// main.js
import { Layout } from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
...
Vue.use(Layout);
...

刷新即出现布局效果。