<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等组件放置到对应位置即可。
打开组件网址找到侧边布局代码。
修改后粘贴到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>
...
### JavaScript
* js的基本类型有哪些？引用类型有哪些？null和undefined的区别。
* 如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）
* Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？
* JS常见的dom操作api
* 解释一下事件冒泡和事件捕获
* 事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？
* 对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？
* this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？
* call，apply，bind
* 显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链
* 创建对象的多种方式
* 实现继承的多种方式和优缺点
* new 一个对象具体做了什么
* 手写Ajax，XMLHttpRequest
* 变量提升
* 举例说明一个匿名函数的典型用例
* 指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？
* attribute和property的区别
* document load和document DOMContentLoaded两个事件的区别
* JS代码调试
**开源分享：https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**
