Vue Router

webpack目录结构

image-20201215103557011.png

runtime-compiler和runtime-only的区别

1.runtime-compiler：

  • 过程：template -> ast（抽象语法树） -> render -> vdom（虚拟dom） ->UI

2.runtime-only:

  • 过程：render -> vdom -> UI
  • 特点：性能更高，代码更少更轻便

一、Vue-cil

二、Vue-Router

history

history类似于一个栈结构

history.back等价于history.go(-1)

history.forward等价于history.go(1)

history.replaceState()，用参数中的路由属性替换当前的url

history.pushState()，push路由属性值history栈中

1.Vue-Router框架的搭建

  2. //1.配置路由相关信息
  3. import VueRouter from 'vue-router'
  4. import Vue from 'vue'
  6. //2.通过Vue.use(插件)，安装插件
  7. Vue.use()
  9. //3.创建VueRouter对象
  10. const router = new VueRouter({
  11.     //配置路由与组件的关系
  12.     routes: [
  14.     ]
  15. })
  17. //4.导出VueRouter对象
  18. export default router

2.VueRouter的使用

  1. //创建路由组件:Home.vue、About.vue
  3. //配置映射关系：组件和路径的关系
  4. import Vue from 'vue'
  5. import VueRouter from 'vue-router'
  6. import Home from '../components/Home'
  8. Vue.use(VueRouter)
  10. const routes = [
  11.   {
  12.     path: '/',
  13.     name: 'Home',
  14.     component: Home
  15.   },
  16.   {
  17.     path: '/about',
  18.     name: 'About',
  19.     // route level code-splitting
  20.     // this generates a separate chunk (about.[hash].js) for this route
  21.     // which is lazy-loaded when the route is visited.
  22.     component: () => import(/* webpackChunkName: "about" */ '../components/About')
  23.   }
  24. ]
  26. const router = new VueRouter({
  27.   routes
  28. })
  30. export default router
  33. //使用路由：<router-link>和<router-view>,view相当于一个占位，表示页面应该展示的位置
  34. <template>
  35.   <div id="app">
  36.     <h2>嘿嘿</h2>
  37.     <router-link to="/">首页</router-link>
  38.     <router-link to="/about">关于</router-link>
  39.     <router-view></router-view>
  40.   </div>
  41. </template>

3.路由使用的一些细节

  • redirect：重定向
  1. {
  2.     path: '/',
  3.     redirect: '/home'
  4.   },
  5.   {
  6.     path: '/home',
  7.     name: 'Home',
  8.     component: Home
  9.   },

image-20201215161518124.png

  • tag属性：默认为a标签，而可以使用tag属性来指定标签的样式
  • replace属性：不会留下history记录，该情况下不能通过后退按钮返回到上一个页面中
  • active-class：当路由匹配成功时，会自动给当前元素设置一个router-link-active的class

4.动态路由

作用：拿到url拼接的参数

  1. //App.vue，使用vbind绑定data中的数据到属性中
  2. <router-link :to="'/user/'+userId" tag="button">用户</router-link>
  4. <script>
  5.   export default {
  6.     name: 'App',
  7.     data(){
  8.       return {
  9.         userId: 'zhangsan'
  10.       }
  11.     }
  12.   }
  13. </script>
  15. //./router/index.js
  16. {
  17.     path: '/user/:userId',
  18.     name: 'User',
  19.     component: () => import('../components/User')
  20.   }
  22. //获取值
  23. <template>
  24.     <div>
  25.         <h2>这是用户组件啊</h2>
  26.         <p>{{userId}}</p>
  27.     </div>
  28. </template>
  30. <script>
  31.     export default {
  32.         name: "User",
  33.         computed: {
  34.             userId(){
  35.                 return this.$route.params.userId
  36.             }
  37.         }
  38.     }
  39. </script>

5.懒加载

  • 路由懒加载的效果

image-20201216164813306.png

  • 路由懒加载的使用

component: () => import('../components/User')

5.路由嵌套

  1. //增加路由的子路由
  2. {
  3.     path: '/home',
  4.     name: 'Home',
  5.     component: Home,
  6.     children: [
  7.       {
  8.         path: 'news',
  9.         component: () => import('../components/HomeNews')
  10.       },
  11.       {
  12.         path: 'message',
  13.         component: () => import('../components/HomeMessage')
  14.       }
  15.     ]
  16.   }
  18. //2.在父路由中的模板添加router—view和router-link
  19. <template>
  20.     <div>
  21.         <h2>我是首页</h2>
  22.         <p>我是首页内容</p>
  23.         <router-link to="/home/news">新闻呀</router-link>
  24.         <router-link to="/home/message">消息呀</router-link>
  25.         <router-view></router-view>
  26.     </div>
  27. </template>

6.路由间参数的传递

去参数的两种方式：

1.params类型：

  • 配置路由映射的path格式：’routerName/:id’
  • 将值放在路径后面
  • 在跳转后通过$route.params.id来获取参数

2.query类型：

  • 配置path格式：<router-link :to="{path: '/profile', query: {name: 'LewisLiu',age: 21}}" tag="button">档案</router-link>
  • 写好后，该参数值为作为路径后面的query参数进行传递
  • 通过$route.query来获取参数

7.导航守卫

使用组件的生命周期函数来实现自定义代码

  1. <script>
  2.     export default {
  3.         name: "Home",
  4.         created() {
  5.             document.title = '首页'
  6.         },
  7.         mounted() {
  8.         },
  9.         updated() {
  10.         }
  11.     }
  12. </script>

8.vue-router-keepalive

在路由切换时，使组件状态保留，避免重新渲染，有两个重要的属性

  • include-字符串或正则表达式，只有匹配的组件会被缓存
  • exclude-任何匹配的组件都不会被保存

三、Vuex

响应式状态管理

1.state

用于存储数据

2.mutations

跟新store状态的更新唯一方式：提交Mutation

  • 当更新一些数据时，可以携带参数，作为mutation的载荷
  • 如果参数不为一个时，可以将参数封装成一个对象进行参数传递
  1. //  1.组件中的method
  2. addStudent(){
  3.       const stu = {id: 114, name: 'joker'}
  4.       this.$store.commit('addStudent',stu)
  5.     }
  6. // 2. /vuex/index.js中的方法
  7. addStudent(state,stu){
  8.             state.student.push(stu)
  9.         }

3.getters

同计算属性computed，可以将一些数据进行处理

4.actions

mutations中的方法要求为同步方法，对于异步方法，mutations不能很好的对devtools进行支持

故使用actions来进行异步操作

  1. actions: {
  2.     aUpdateInfo(context,payload) {
  3.         setTimeout(() =>{
  4.             context.commit('updateInfo')//调用本身的mutations方法
  5.         })
  6.     }
  7. }

5.moudles

将store分模块