diff --git "a/\345\274\240\345\206\240\350\261\252/20230424-Vue\350\267\257\347\224\261\345\205\245\351\227\250.md" "b/\345\274\240\345\206\240\350\261\252/20230424-Vue\350\267\257\347\224\261\345\205\245\351\227\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..5239477a7dccc8304532e14907d0ae718436ec34 --- /dev/null +++ "b/\345\274\240\345\206\240\350\261\252/20230424-Vue\350\267\257\347\224\261\345\205\245\351\227\250.md" @@ -0,0 +1,86 @@ +# 4.24笔记 +# vue路由入门 +## 安装vue-router +```JS +npm install vue-router +``` +## main.js文件 +```JS +import { createApp } from 'vue' +import './style.css' +import App from './App.vue' +import {createRouter,createWebHistory} from 'vue-router' + +import Class from './components/Class.vue' +import Student from './components/Student.vue' +import Teacher from './components/Teacher.vue' +// 2. 定义一些路由 +// 每个路由都需要映射到一个组件。 +// 我们后面再讨论嵌套路由。 +const routes = [ + { path: '/', component: Class }, + { path: '/Student', component: Student }, + { path: '/Teacher', component: Teacher }, + ] + + // 3. 创建路由实例并传递 `routes` 配置 + // 你可以在这里输入更多的配置，但我们在这里 + // 暂时保持简单 + const router = createRouter({ + // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。 + history: createWebHistory(), + routes, // `routes: routes` 的缩写 + }) + + // 5. 创建并挂载根实例 + const app = createApp(App) + //确保 _use_ 路由实例使 + //整个应用支持路由。 + app.use(router) + + app.mount('#app') + + // 现在，应用已经启动了！ + +``` +## APP.vue文件 +``` JS + + + + +``` +## Class.vue文件 +``` JS + + + +``` +## Student.vue文件 +``` JS + +``` +## Teacher.vue文件 +``` JS + +``` \ No newline at end of file diff --git "a/\345\274\240\345\206\240\350\261\252/20230426-\345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215.md" "b/\345\274\240\345\206\240\350\261\252/20230426-\345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215.md" new file mode 100644 index 0000000000000000000000000000000000000000..8234b7a94d0e090bd14beff9638df4e91707e6aa --- /dev/null +++ "b/\345\274\240\345\206\240\350\261\252/20230426-\345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215.md" @@ -0,0 +1,60 @@ +# 4.26笔记 +# 带参数的动态路由匹配 +## 动态路由的基本形式 +很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数 ： +```JS +const User = { + template: '
User
', +} + +// 这些都会传递给 `createRouter` +const routes = [ + // 动态字段以冒号开始 + { path: '/users/:id', component: User }, +] +``` +现在像 /users/johnny 和 /users/jolyne 这样的 URL 都会映射到同一个路由。 + +路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。因此，我们可以通过更新 User 的模板来呈现当前的用户 ID： +```JS +const User = { + template: '
User {{ $route.params.id }}
', +} +``` +除了 $route.params 之外，$route 对象还公开了其他有用的信息，如 $route.query（如果 URL 中存在参数）、$route.hash 等。你可以在 API 参考中查看完整的细节 +## 响应路由参数的变化 +要对同一组件中参数的变化作出响应，可以使用watch`$router`对象上的任意属性,在这个场景中就是`$router.params`: +```JS +const User = { + template: '...', + created() { + this.$watch( + () => this.$route.params, + (toParams, previousParams) => { + // 对路由变化做出响应... + } + ) + }, +} +``` +## 捕获所有路由或404 Notfound路由 +常规参数只匹配 url 片段之间的字符，用`/`分隔。如果我们想匹配任意路径，我们可以使用自定义的 路径参数 正则表达式，在 路径参数 后面的括号中加入 正则表达式 : +```JS +const routes = [ + // 将匹配所有内容并将其放在 `$route.params.pathMatch` 下 + { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }, + // 将匹配以 `/user-` 开头的所有内容，并将其放在 `$route.params.afterUser` 下 + { path: '/user-:afterUser(.*)', component: UserGeneric }, +] +``` +在这个特定的场景中，我们在括号之间使用了自定义正则表达式，并将pathMatch 参数标记为可选可重复。这样做是为了让我们在需要的时候，可以通过将 path 拆分成一个数组，直接导航到路由： +```JS +this.$router.push({ + name: 'NotFound', + // 保留当前路径并删除第一个字符，以避免目标 URL 以 `//` 开头。 + params: { pathMatch: this.$route.path.substring(1).split('/') }, + // 保留现有的查询和 hash 值，如果有的话 + query: this.$route.query, + hash: this.$route.hash, +}) +``` \ No newline at end of file diff --git "a/\345\274\240\345\206\240\350\261\252/20230427-\350\267\257\347\224\261\345\214\271\351\205\215\350\257\255\346\263\225\343\200\201\345\265\214\345\245\227\350\267\257\347\224\261.md" "b/\345\274\240\345\206\240\350\261\252/20230427-\350\267\257\347\224\261\345\214\271\351\205\215\350\257\255\346\263\225\343\200\201\345\265\214\345\245\227\350\267\257\347\224\261.md" new file mode 100644 index 0000000000000000000000000000000000000000..affdddf3193ffde045dfaebe9dea0557d2b2832a --- /dev/null +++ "b/\345\274\240\345\206\240\350\261\252/20230427-\350\267\257\347\224\261\345\214\271\351\205\215\350\257\255\346\263\225\343\200\201\345\265\214\345\245\227\350\267\257\347\224\261.md" @@ -0,0 +1,174 @@ +# 4.27笔记 +# 路由匹配语法 +```JS +import { createApp } from 'vue' +import './style.css' +import App from './App.vue' +import {createRouter,createWebHistory} from 'vue-router' + +const routes=[ + { + path:'/', + component:()=>import ('./components/Blog.vue') + }, + { + path:'/:name', + component:()=>import('./components/BlogName.vue') + }, + { + path:'/:id', + component:()=>import('./components/BlogId.vue') + } +] + +const router=createRouter({ + history:createWebHistory(), + routes +}) + + + +createApp(App).use(router).mount('#app') +``` +routes 数组的顺序重要! 具有顺序关系，匹配了第一个就不会继续往下匹配，所以/name匹配第二条，/3也是匹配第二条 +## 在参数中自定义正则 +(\\d+)可以匹配数字 +```JS +const routes = [ + // /:orderId -> 仅匹配数字 + { path: '/:orderId(\\d+)' }, + // /:productName -> 匹配其他任何内容 + { path: '/:productName' }, +] +``` +routes 数组的顺序并不重要! +## 可重复的参数 +如果你需要匹配具有多个部分的路由，如 /first/second/third，你应该用 *（0 个或多个）和 +（1 个或多个）将参数标记为可重复 +```JS +const routes = [ + // /:chapters -> 匹配 /one, /one/two, /one/two/three, 等 + { path: '/:chapters+' }, + // /:chapters -> 匹配 /, /one, /one/two, /one/two/three, 等 + { path: '/:chapters*' }, +] +``` +这些也可以通过在右括号后添加它们与自定义正则结合使用 + +## Sensitive 与 strict 路由配置 +- 默认情况下，所有路由是不区分大小写的，并且能匹配带有或不带有尾部斜线的路由 +- 可以通过 strict 和 sensitive 选项来修改，它们可以既可以应用在整个全局路由上，又可以应用于当前路由上 +## 可选参数 +- - 你也可以通过使用 ? 修饰符(0 个或 1 个)将一个参数标记为可选 +请注意，* 在技术上也标志着一个参数是可选的，但 ? 参数不能重复 +# 嵌套路由 +## main.js文件 +要将组件渲染到这个嵌套的 router-view 中，我们需要在路由中配置 children +注意，以 / 开头的嵌套路径将被视为根路径。这允许你利用组件嵌套，而不必使用嵌套的 URL +```JS +import { createApp } from 'vue' +import './style.css' +import App from './App.vue' +import { createRouter, createWebHistory } from 'vue-router' + + + +const routes = [ + + { + path: '/Class', + component: () => import('./components/Class.vue'), + children:[ + { + path:'SXiaoHong', + component:() =>import('./components/SXiaoHong.vue') + }, + { + path:'TXiaoHong', + component:() =>import('./components/TXiaoHong.vue') + } + ] + } + +] + + + +const router = createRouter({ + history: createWebHistory(), + routes +}) + +createApp(App).use(router).mount('#app') + +``` +## Class.vue文件 +Class.vue 它渲染顶层路由匹配的组件。同样地，一个被渲染的组件也可以包含自己嵌套的 +```JS + + + +``` +## SXiaoHpng.vue文件 +```JS + + + +``` +## TXiaoHpng.vue文件 +```JS + + + +``` +## App.vue文件 +```JS + + +``` +## 嵌套命名路由 +在处理命名路由时，你通常会给子路由命名 +```JS +const routes = [ + { + path: '/user/:id', + component: User, + // 请注意，只有子路由具有名称 + children: [{ path: '', name: 'user', component: UserHome }], + }, +] +``` +在一些场景中，你可能希望导航到命名路由而不导航到嵌套路由。例如，你想导航 /user/:id 而不显示嵌套路由。那样的话，你还可以命名父路由，但请注意重新加载页面将始终显示嵌套的子路由，因为它被视为指向路径/users/:id 的导航，而不是命名路由 \ No newline at end of file diff --git "a/\345\274\240\345\206\240\350\261\252/20230428-\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\343\200\201\345\221\275\345\220\215\350\267\257\347\224\261\343\200\201\345\221\275\345\220\215\350\247\206\345\233\276.md" "b/\345\274\240\345\206\240\350\261\252/20230428-\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\343\200\201\345\221\275\345\220\215\350\267\257\347\224\261\343\200\201\345\221\275\345\220\215\350\247\206\345\233\276.md" new file mode 100644 index 0000000000000000000000000000000000000000..c128be28631aac9ea6e2ae7772323a1198c60d86 --- /dev/null +++ "b/\345\274\240\345\206\240\350\261\252/20230428-\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\343\200\201\345\221\275\345\220\215\350\267\257\347\224\261\343\200\201\345\221\275\345\220\215\350\247\206\345\233\276.md" @@ -0,0 +1,224 @@ +# 4.28笔记 +# 编程式导航 +## 导航到不同的位置 +注意：在 Vue 实例中，你可以通过 router访问路由实例。因此你可以调用this. +router.push。 + +当你点击 时，内部会调用这个方法，所以点击 相当于调用 router.push(...) ： + +- 声明式 + +- 编程式 router.push(...) +```JS +// 字符串路径 +router.push('/users/eduardo') + +// 带有路径的对象 +router.push({ path: '/users/eduardo' }) + +// 命名的路由，并加上参数，让路由建立 url +router.push({ name: 'user', params: { username: 'eduardo' } }) + +// 带查询参数，结果是 /register?plan=private +router.push({ path: '/register', query: { plan: 'private' } }) + +// 带 hash，结果是 /about#team +router.push({ path: '/about', hash: '#team' }) +``` +当指定 params 时，可提供 string 或 number 参数（或者对于可重复的参数可提供一个数组）。任何其他类型（如 undefined、false 等）都将被自动字符串化。对于可选参数，你可以提供一个空字符串（""）来跳过它 + +## 替换当前位置 +- 声明式 + +- 编程式 router.replace(...) + +## 横跨历史 +该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步，类似于 window.history.go(n)。 +```JS +// 向前移动一条记录，与 router.forward() 相同 +router.go(1) + +// 返回一条记录，与 router.back() 相同 +router.go(-1) + +// 前进 3 条记录 +router.go(3) + +// 如果没有那么多记录，静默失败 +router.go(-100) +router.go(100) +``` +# 命名路由 +除了 path 之外，你还可以为任何路由提供 name。这有以下优点： + +- 没有硬编码的 URL +- params 的自动编码/解码。 +- 防止你在 url 中出现打字错误。 +- 绕过路径排序（如显示一个） +```JS +const routes = [ + { + path: '/user/:username', + name: 'user', + component: User, + }, +] +``` +要链接到一个命名的路由，可以向 router-link 组件的 to 属性传递一个对象： +```JS + + User + +``` +这跟代码调用 router.push() 是一回事： +```JS +router.push({ name: 'user', params: { username: 'erina' } }) +``` +在这两种情况下，路由将导航到路径 /user/erina。 + +# 命名视图 +一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s) + +你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default## + +## 嵌套命名视图 + +### main.js文件 +```JS +import { createApp } from 'vue' +import './style.css' +import App from './App.vue' +import {createRouter,createWebHistory} from 'vue-router' + + +const routes=[ + { + path:'/blog', + component:()=>import('./components/Blog.vue'), + children:[ + { + path:'content', + components:{ + default:()=>import('./components/NavLeft.vue'), + content:()=>import('./components/Content.vue') + + }, + children:[ + { + path:'text', + components:{ + title:()=>import('./components/Title.vue'), + text:()=>import('./components/Text.vue') + } + } + ] + } + ] + } +] + +const router=createRouter({ + history:createWebHistory(), + routes +}) + +createApp(App).use(router).mount('#app') +``` +### App.vue文件 +```JS + +``` +### Blog.vue文件 +```JS + + + +``` +### NavLeft.vue文件 +```JS + + + +``` +### Content.vue文件 +```JS + + + +``` +### Title.vue文件 +```JS + + + +``` +### Text.vue文件 +```JS + + + +``` \ No newline at end of file