文章目录
成果展示：
一 路由引入与使用
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);
...
刷新即出现布局效果。