From 467411e55876f23b8808c9812139ac1022e94556 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E4=BD=B3=E6=96=87?= <1340679907@qq.com> Date: Mon, 24 Apr 2023 14:38:58 +0800 Subject: [PATCH 1/6] oo --- "\345\221\250\345\234\206/20230424-\347\254\224\350\256\260.md" | 1 + 1 file changed, 1 insertion(+) create mode 100644 "\345\221\250\345\234\206/20230424-\347\254\224\350\256\260.md" diff --git "a/\345\221\250\345\234\206/20230424-\347\254\224\350\256\260.md" "b/\345\221\250\345\234\206/20230424-\347\254\224\350\256\260.md" new file mode 100644 index 0000000..fc01ba7 --- /dev/null +++ "b/\345\221\250\345\234\206/20230424-\347\254\224\350\256\260.md" @@ -0,0 +1 @@ +### hihi \ No newline at end of file -- Gitee From efd41a268d0a4bbd2787cb50c59787367a69b496 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=91=A8=E5=9C=86?= <2825532983@qq.com> Date: Mon, 24 Apr 2023 09:16:59 +0000 Subject: [PATCH 2/6] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=20?= =?UTF-8?q?=E5=91=A8=E5=9C=86/20230424-=E7=AC=94=E8=AE=B0.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "\345\221\250\345\234\206/20230424-\347\254\224\350\256\260.md" | 1 - 1 file changed, 1 deletion(-) delete mode 100644 "\345\221\250\345\234\206/20230424-\347\254\224\350\256\260.md" diff --git "a/\345\221\250\345\234\206/20230424-\347\254\224\350\256\260.md" "b/\345\221\250\345\234\206/20230424-\347\254\224\350\256\260.md" deleted file mode 100644 index fc01ba7..0000000 --- "a/\345\221\250\345\234\206/20230424-\347\254\224\350\256\260.md" +++ /dev/null @@ -1 +0,0 @@ -### hihi \ No newline at end of file -- Gitee From b66e8d537d70c629b4789bcc98cbc0da2ee749fa Mon Sep 17 00:00:00 2001 From: oo <2825532983@qq.com> Date: Wed, 26 Apr 2023 11:03:38 +0800 Subject: [PATCH 3/6] oo --- ...57\347\224\261\346\263\250\345\206\214.md" | 74 +++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 "\345\221\250\345\234\206/20230424-\350\267\257\347\224\261\346\263\250\345\206\214.md" diff --git "a/\345\221\250\345\234\206/20230424-\350\267\257\347\224\261\346\263\250\345\206\214.md" "b/\345\221\250\345\234\206/20230424-\350\267\257\347\224\261\346\263\250\345\206\214.md" new file mode 100644 index 0000000..3ce3261 --- /dev/null +++ "b/\345\221\250\345\234\206/20230424-\350\267\257\347\224\261\346\263\250\345\206\214.md" @@ -0,0 +1,74 @@ +# 路由 + +```js +// main.js +import { createApp } from 'vue' +import App from './App.vue' +import {createRouter,createWebHashHistory} from 'vue-router' + +// 1. 定义路由组件. +// 也可以从其他文件导入 +import index from './components/index.vue' +import home from './components/home.vue' +import about from './components/about.vue' + + +// 2. 定义一些路由 +// 每个路由都需要映射到一个组件。 +// 我们后面再讨论嵌套路由。 +const routes = [ + { path: '/', component: index }, + { path: '/home', component: home }, + { path: '/about', component: about }, +] + +// 3. 创建路由实例并传递 `routes` 配置 +// 你可以在这里输入更多的配置，但我们在这里 +// 暂时保持简单 +const router = createRouter({ + // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。 + history: createWebHashHistory(), + routes, // `routes: routes` 的缩写 +}) + + +const app =createApp(App) +//确保 _use_ 路由实例使 +//整个应用支持路由。 +app.use(router) + +app.mount('#app') + +``` + + + +```js +//App.vue + + + + +//index.vue + +``` + + +#### 模式的不同 +createWebHashHistory 是hash模式，路由上会有# +createWebHistory 是history模式，路由上不带# \ No newline at end of file -- Gitee From c5f31efca552d4b82fd4bf0be57879342ffe2780 Mon Sep 17 00:00:00 2001 From: oo <2825532983@qq.com> Date: Wed, 26 Apr 2023 16:23:43 +0800 Subject: [PATCH 4/6] oo --- .../20230426-vue\350\267\257\347\224\261.md" | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 "\345\221\250\345\234\206/20230426-vue\350\267\257\347\224\261.md" diff --git "a/\345\221\250\345\234\206/20230426-vue\350\267\257\347\224\261.md" "b/\345\221\250\345\234\206/20230426-vue\350\267\257\347\224\261.md" new file mode 100644 index 0000000..f37f5aa --- /dev/null +++ "b/\345\221\250\345\234\206/20230426-vue\350\267\257\347\224\261.md" @@ -0,0 +1,35 @@ + + +```js +import { createApp } from 'vue' +import App from './App.vue' +import './assets/main.css' +import {createRouter,createWebHistroy} from 'vue-router' +import Hello from './components/HelloWorld.vue' +import Dome from './components/Dome.vue' +import Font404 from './components/Font404.vue' + +const routes =[ + { + path:'/', + component:Hello + }, + { + path:'/Dome/:id', + component:Dome + }, + { + path:'/:abc(.*)', + component:Font404 + } +] +const router = createRouter({ + history:createWebHistroy(), + routes +}) +const app =createApp(app) +app.use(router); +app.mount('#app') + + +``` -- Gitee From 828b278981c7ea4400217c61d82a7fca013f2906 Mon Sep 17 00:00:00 2001 From: oo <2825532983@qq.com> Date: Fri, 28 Apr 2023 09:31:20 +0800 Subject: [PATCH 5/6] oo --- ...14\345\245\227\350\267\257\347\224\261.md" | 41 +++++++++++++++++++ ...76\343\200\201\350\267\257\347\224\261.md" | 31 ++++++++++++++ 2 files changed, 72 insertions(+) create mode 100644 "\345\221\250\345\234\206/20230427-\345\265\214\345\245\227\350\267\257\347\224\261.md" create mode 100644 "\345\221\250\345\234\206/20230428-\345\221\275\345\220\215\350\247\206\345\233\276\343\200\201\350\267\257\347\224\261.md" diff --git "a/\345\221\250\345\234\206/20230427-\345\265\214\345\245\227\350\267\257\347\224\261.md" "b/\345\221\250\345\234\206/20230427-\345\265\214\345\245\227\350\267\257\347\224\261.md" new file mode 100644 index 0000000..ed18e87 --- /dev/null +++ "b/\345\221\250\345\234\206/20230427-\345\265\214\345\245\227\350\267\257\347\224\261.md" @@ -0,0 +1,41 @@ +# 嵌套路由 +一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下，URL 的片段通常对应于特定的嵌套组件结构，例如： + +/user/johnny/profile /user/johnny/posts ++------------------+ +-----------------+ +| User | | User | +| +--------------+ | | +-------------+ | +| | Profile | | +------------> | | Posts | | +| | | | | | | | +| +--------------+ | | +-------------+ | ++------------------+ +-----------------+ + +通过 Vue Router，你可以使用嵌套路由配置来表达这种关系。 + +# 嵌套的命名路由 +在处理命名路由时，你通常会给子路由命名： + +```js +const routes = [ + { + path: '/user/:id', + component: User, + // 请注意，只有子路由具有名称 + children: [{ path: '', name: 'user', component: UserHome }], + }, +] +``` +这将确保导航到 /user/:id 时始终显示嵌套路由。 + +在一些场景中，你可能希望导航到命名路由而不导航到嵌套路由。例如，你想导航 /user/:id 而不显示嵌套路由。那样的话，你还可以命名父路由，但请注意重新加载页面将始终显示嵌套的子路由，因为它被视为指向路径/users/:id 的导航，而不是命名路由： + +```js +const routes = [ + { + path: '/user/:id', + name: 'user-parent', + component: User, + children: [{ path: '', name: 'user', component: UserHome }], + }, +] +``` \ No newline at end of file diff --git "a/\345\221\250\345\234\206/20230428-\345\221\275\345\220\215\350\247\206\345\233\276\343\200\201\350\267\257\347\224\261.md" "b/\345\221\250\345\234\206/20230428-\345\221\275\345\220\215\350\247\206\345\233\276\343\200\201\350\267\257\347\224\261.md" new file mode 100644 index 0000000..2781347 --- /dev/null +++ "b/\345\221\250\345\234\206/20230428-\345\221\275\345\220\215\350\247\206\345\233\276\343\200\201\350\267\257\347\224\261.md" @@ -0,0 +1,31 @@ +# 命名路由 +除了 path 之外，你还可以为任何路由提供 name。这有以下优点： + +1. 没有硬编码的 URL +2. params 的自动编码/解码。 +3. 防止你在 url 中出现打字错误。 +4. 绕过路径排序（如显示一个） + +```js +const routes = [ + { + path: '/user/:username', + name: 'user', + component: User, + }, +] +``` + +要链接到一个命名的路由，可以向 router-link 组件的 to 属性传递一个对象： + +```html + + User + +这跟代码调用 router.push() 是一回事： +``` +```js +router.push({ name: 'user', params: { username: 'erina' } } +) +``` +在这两种情况下，路由将导航到路径 /user/erina。 \ No newline at end of file -- Gitee From 9587060d4d96285e0119be5be0c3357c44819353 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=91=A8=E5=9C=86?= <2825532983@qq.com> Date: Fri, 28 Apr 2023 02:05:39 +0000 Subject: [PATCH 6/6] =?UTF-8?q?update=20=E5=91=A8=E5=9C=86/20230428-?= =?UTF-8?q?=E5=91=BD=E5=90=8D=E8=A7=86=E5=9B=BE=E3=80=81=E8=B7=AF=E7=94=B1?= =?UTF-8?q?.md.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 周圆 <2825532983@qq.com> --- ...247\206\345\233\276\343\200\201\350\267\257\347\224\261.md" | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git "a/\345\221\250\345\234\206/20230428-\345\221\275\345\220\215\350\247\206\345\233\276\343\200\201\350\267\257\347\224\261.md" "b/\345\221\250\345\234\206/20230428-\345\221\275\345\220\215\350\247\206\345\233\276\343\200\201\350\267\257\347\224\261.md" index 2781347..125e391 100644 --- "a/\345\221\250\345\234\206/20230428-\345\221\275\345\220\215\350\247\206\345\233\276\343\200\201\350\267\257\347\224\261.md" +++ "b/\345\221\250\345\234\206/20230428-\345\221\275\345\220\215\350\247\206\345\233\276\343\200\201\350\267\257\347\224\261.md" @@ -22,8 +22,9 @@ const routes = [ User -这跟代码调用 router.push() 是一回事： ``` +这跟代码调用 router.push() 是一回事： + ```js router.push({ name: 'user', params: { username: 'erina' } } ) -- Gitee