小马Ti的博客

组件内路由守卫作用对路由进行权限控制 使用方法123456// 进入守卫：通过路由规则，进入该组件时被调用beforeRouteEnter (to, from, next){},// 离开守卫：通过路由规则，离开该组件时被调用beforeRouteLeave (to, from, next){},

独享路由守卫使用方法123456789101112beforeEnter:(to, from, next) => { console.log('beforeEnter',to, from) if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制 if(localStorage.getItem('school')==='atguigu'){ next() }else{ alert('学校名不对，没有查看权限！') } }else{ next() }}

嵌套路由使用方法1.配置路由规则，使用children配置项：123456789101112131415161718192021routes:[ { path:'/about', component:About }, { path:'/home', component:Home, children:[ //通过children配置子级路由 { path:'news', //此处一定不要写‘/news’ component:News, }, { path:'message', //此处一定不要写‘/message’ component:Message, ...

6个事物的顺序一.四个守卫的执行顺序1.全局路由守卫的前置 (beforeEach)**触发时机：beforeEach 在路由跳转之前触发。它会在任何路由导航发生时被调用，不管是从哪一页面跳转到哪一页面。此时，你可以通过调用 next() 来决定是否允许路由跳转，如果没有调用 next() 或调用 next(false)，导航将被中断。 作用：它主要用于全局级别的权限控制或其他路由前置操作。 123456789router.beforeEach((to, from, next) => { // 权限检查等 if (to.meta.requiresAuth && !isAuthenticated) { next('/login'); // 不允许跳转，跳转到登录页 } else { next(); // 允许跳转 }}); 2.组件内路由守卫的前置...

命名路由简化路由的跳转 使用方法1.给路由命名123456789101112131415161718192021222324252627282930313233343536373839import VueRouter from 'vue-router'import About from "@/pages/About.vue";import Home from "@/pages/Home.vue";import News from "@/pages/News.vue";import Message from "@/pages/Message.vue";import Detail from "@/pages/Detail.vue";export default new VueRouter({ routes: [ //一级路由 { name:"guanyu", ...

几个注意点（1）路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。 （2）通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。 （3）每个组件都有自己的$route属性，里面存储着自己的路由信息。 （4）整个应用中只有一个router，可以通过组件的$router属性获取到。

生命周期钩子(路由组件独有)作用路由组件所独有的两个钩子，用于捕获路由组件的激活状态。 分类① activated 路由组件被激活时触发。 ② deactivated 路由组件失活时触发。 PS:$nextTick（真实DOM出来之后再回调，回顾P90）和activated、deactivated是生命周期中不在图中的剩下三个。

Vuex模块化与namespace命名空间（namespaced）是一个用于模块化的功能，它允许你将不同的 Vuex 模块分开，每个模块都有自己的状态、动作、突变和获取器。使用命名空间可以避免不同模块之间的状态和动作的命名冲突，并提高代码的可维护性 使用方式一1.将state之类的东西,用一个对象保存起来.并添加namespaced: true这个配置项123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)// 计算求和相关的配置const countOption = { namespaced: true, state: {...

replace属性作用：控制路由跳转时操作浏览器历史记录的模式 浏览器的历史记录有两种写入方式，分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push。 使用方法1<router-link replace ...... >News</router-link>

默认插槽使用方法思路: 先编写好组件模板(子组件),然后在APP中传递数据给组件模板(父组件). 1.编写你要使用的组件模板12345678910111213141516171819202122232425262728293031323334<template> <div id="Category"> <h3>{{ title }}分类</h3> <!-- 定义插槽，默认插槽的名字是default --> <slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot> </div></template><script>export default { name: "Category", ...