路由和页面

1. 根据权限不同动态生成功能菜单

静态路由表:不需要做权限控制的路由,每个用户都可以正常访问。静态路由不随着用户而发生变化

动态路由表：需要做权限控制的路由，用户如果权限不一致访问的路由也不一样。动态路由随着用户的权限能访问的个数也不一样。

2. 拆分静态路由和动态路由表

export const asyncRouter = [ //后面来做功能 ]
export const constantRouter = [ //...]
const createRouter = () => new Router({ // 控制路由滚动行为 滚动到顶部 scrollBehavior: () => ({ y: 0 }), // 组合到一起组成路由表 routes: [...constantRoutes, ...asyncRoutes] })

3. 对router.js路由表中的动态路由进行物理目录拆分，实现真正的模块化管理

目标:对router.js路由表中的动态路由进行物理目录拆分，实现真正的模块化管理

思路:把每一个路由配置单独写在一个文件中,然后在统一导入使用

4. 理解左侧导航菜单是如何生成的

项目左侧的菜单时根据完整的路由表遍历出来的，并且我们学习了一个新的属性 this.$router.options.routes 可以拿到完整的路由表数据

负责菜单标题渲染的是meta属性中的title属性，负责图标渲染的是meta中的icon属性

5. route中的meta配置,用来配置路由的信息,信息的内容可以任意定义

获取信息

• vue调试工具中可以查看
• 在代码中:this.$route.meta.xxx

它的作用:

• 设置路由的title,和icon

6. svg图片的处理-工程化的方法

在另一个项目中,也可以用svg图片来做图标

安装loader npm i svg-sprite-loader@4.1.3

配置vue.config.js

chainWebpack(config) { // set svg-sprite-loader config.module .rule('svg') .exclude.add(resolve('src/icons')) .end() config.module .rule('icons') .test(/\.svg$/) .include.add(resolve('src/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) .end() }

创建一个svg图标的组件 在index.js中注册成全局组件,在main.js中引入icons/index.js

使用组件 <svg-icon icon-class='类名' />

学习网站

svg图片下载地址

7.render基本使用

作用 一个组件的内容有两种书写方法:

• template: 常见写法 通过模板语法来指定组件的内容
• render: 通过render函数来确定组件的内容
  如果在组件定义时,两者同时存在,则会一render为准
  export default { template:< h1>我是一个组件1< /h1>, render:(h)=> { //参数h是一个函数,他的返回值是Vnode (虚拟dom) return h('h1','我是一个组件2')}}
  如何在render中获取插槽的内容?
  答:this.$slots中自动收集所有的插槽内容
  为什么在vue中会用到虚拟dom?
• 虚拟dom比真实都没体积小,操作时相对来说消耗性少,如果要在页面删除一个dom会引起重绘,他很可能影响后边元素的布局
• 虚拟dom才能跨域(在服务器也可以使用vue技术)跨平台,如过真的操作真实的dom则与浏览器强制绑定一起,vue就会失去更多的可能.

8. 虚拟dom

虚拟dom(VNode) 虚拟 假的 不是真实的dom

• 真实的dom:在浏览器中通过dom api操作的,复杂的对象 是个对象,他的属性非常多,在浏览器中做dom操作相对来说,会比较消耗性能
• 虚拟dom this.$slots.default 他的属性相对真实dom就比较少 --用少量的属性来描述一个dom,他无法在浏览器中直接显示