diff --git "a/\350\260\242\351\225\277\344\270\234/2020.6.08.md" "b/\350\260\242\351\225\277\344\270\234/2021.6.08.md" similarity index 100% rename from "\350\260\242\351\225\277\344\270\234/2020.6.08.md" rename to "\350\260\242\351\225\277\344\270\234/2021.6.08.md" diff --git "a/\350\260\242\351\225\277\344\270\234/2020.6.09.md" "b/\350\260\242\351\225\277\344\270\234/2021.6.09.md" similarity index 100% rename from "\350\260\242\351\225\277\344\270\234/2020.6.09.md" rename to "\350\260\242\351\225\277\344\270\234/2021.6.09.md" diff --git "a/\350\260\242\351\225\277\344\270\234/2020.6.11.md" "b/\350\260\242\351\225\277\344\270\234/2021.6.11.md" similarity index 100% rename from "\350\260\242\351\225\277\344\270\234/2020.6.11.md" rename to "\350\260\242\351\225\277\344\270\234/2021.6.11.md" diff --git "a/\350\260\242\351\225\277\344\270\234/2020.6.12.md" "b/\350\260\242\351\225\277\344\270\234/2021.6.12.md" similarity index 100% rename from "\350\260\242\351\225\277\344\270\234/2020.6.12.md" rename to "\350\260\242\351\225\277\344\270\234/2021.6.12.md" diff --git "a/\350\260\242\351\225\277\344\270\234/2021.6.15.md" "b/\350\260\242\351\225\277\344\270\234/2021.6.15.md" new file mode 100644 index 0000000000000000000000000000000000000000..aa8e1f3ee94e687420116e1f5e0468914e76d3e3 --- /dev/null +++ "b/\350\260\242\351\225\277\344\270\234/2021.6.15.md" @@ -0,0 +1,13 @@ +## (声明式导航) + +`` 组件支持用户在具有路由功能的应用中 (点击) 导航。 + +通过` to `属性指定目标地址，默认渲染成带有正确链接的` `标签，可以通过配置` tag `属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。 + + + +## router-view + + 组件是一个 functional 组件，渲染路径匹配到的视图组件。 渲染的组件还可以内嵌自己的 ，根据嵌套路径，渲染嵌套组件。 + +因为它也是个组件，所以可以配合 和 使用。如果两个结合一起用，要确保在内层使用 \ No newline at end of file diff --git "a/\350\260\242\351\225\277\344\270\234/2021.6.16.md" "b/\350\260\242\351\225\277\344\270\234/2021.6.16.md" new file mode 100644 index 0000000000000000000000000000000000000000..d0bebbe52e8fdead079b1552aa51b3823169ffec --- /dev/null +++ "b/\350\260\242\351\225\277\344\270\234/2021.6.16.md" @@ -0,0 +1,77 @@ + + +## route （路由对象） +一个路由对象 (route object) 表示当前激活的路由的状态信息 + +常用的如下 +- $route.name:获取当前路由名称 +- $route.params:一个key/value的对象，包含了所有的动态参数，注意key是由定义路由的`:id`确定的 +- $route.query:一个key/value的对象，包含了url中所有的查询参数 +- $route.path:获取路由匹配路径 +- $router.fullPath:匹配路由 + + +## 路由的三个基本概念route、routes、router +- 1.route：指定是一条路由，比如home按钮==>home内容 +- 2.routes:指定是一组路由，是一个数组，由一条条路由组成 +- 3.router:是一种机制，负责管理路由，当收到请求的时候，比如请求home内容，这个时候router就会在routes中找到对应的route +- 4.客户端中的路由，实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于hash 和基于html5 history api + + + +## 动态参数 +当使用路由参数的时候，例如从/user/foo`导航`/user/bar，因为都是渲染同一个组件，组件实例会被复用，生命周期函数将不会再被调用 + + +路由匹配是按照定义的顺序匹配的，`path:'*'`会匹配所有路由,`path:'ba*'`会匹配以ba开头的路由 + +## 嵌套路由 +要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。 + +嵌套路由都写在`children`属性中，然后子路由的path不需要加'/' + +当我们匹配到一个路由时，我们需要同时匹配一个子路由，如： +```js + { + path: '/user', + name:'user', + component:()=> import('../components/User'), + children:[{ + path:'',//这里给一个空字符串就好了 + component: ()=>import('../components/Content') + + }] + } +``` + + +## 编程式导航 +除了使用 创建 a 标签来定义导航链接外，我们可以通过router的实例方法，通过编写代码来实现导航 + + +### router.push(location, onComplete?, onAbort?) +通过`push`方法导航到不同的url，当我们点击时，其实内容会调用`push`这个方法，所以最终都是通过`router.push()`实现的url的导航 +```js +// 字符串 +router.push('home')// "/可以省略，完整写法是/home" + +// 对象 +router.push({ path: 'home' }) + +// 命名的路由 +router.push({ name: 'user', params: { userId: '123' }}) + +// 带查询参数，变成 /register?plan=private +router.push({ path: 'register', query: { plan: 'private' }}) +``` + +### 解决vueRouter 跳转相同路由报错 +解决思路 重写push方法，添加catch +```js +const originalPush = VueRouter.prototype.push +VueRouter.prototype.push = function(location, onResolve, onReject) { + if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject) + return originalPush.call(this, location).catch(err => err) +} +``` + diff --git "a/\350\260\242\351\225\277\344\270\234/2021.6.18.md" "b/\350\260\242\351\225\277\344\270\234/2021.6.18.md" new file mode 100644 index 0000000000000000000000000000000000000000..fa160e78c38657eed9d561a642c28e32125fda14 --- /dev/null +++ "b/\350\260\242\351\225\277\344\270\234/2021.6.18.md" @@ -0,0 +1,65 @@ +## 全局前置守卫 +你可以使用 router.beforeEach 注册一个全局前置守卫： +```js +const router = new VueRouter({ ... }) + +router.beforeEach((to, from, next) => { + // ... +}) +``` + +- to: Route: 即将要进入的目标 路由对象 + +- from: Route: 当前导航正要离开的路由 + +- next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。 + +- next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。 + +- next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由- 对应的地址。 + +- next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。 +问题：如我们需要登入之后才能访问某些路由，所以我们要拦截为登入状态下的跳转 +```js + const path = ['/center', '/qb', '/orderf']//需要拦截的路径 + + if (path.includes(to.fullPath)) { + console.log(path.includes(to)) + if (localStorage.getItem('token')) { + next() + } else { + next('/login')//未登入，跳转到登入页面 + } + } else { + next() + } +``` + + +## 组件内的守卫 +```vue + +``` +beforeRouteEnter 守卫 不能 访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。 + +```js +beforeRouteEnter (to, from, next) { + next(vm => { + // 通过 `vm` 访问组件实例 + }) +} +``` \ No newline at end of file diff --git "a/\350\260\242\351\225\277\344\270\234/2021.6.19.md" "b/\350\260\242\351\225\277\344\270\234/2021.6.19.md" new file mode 100644 index 0000000000000000000000000000000000000000..69511e369d295ad400709b8e0f12992aa5cefd37 --- /dev/null +++ "b/\350\260\242\351\225\277\344\270\234/2021.6.19.md" @@ -0,0 +1,20 @@ +## 路由懒加载 +当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 + +```js +import('./Foo.vue') // 返回 Promise +``` +```js + { + path: '/login', + component: () => import('../views/Login') + } +``` + +## 把组件按组分块 +group-foo是我们要分组的名字 +```js +const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') +const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue') +const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue') +``` \ No newline at end of file