From 8fd9e6bc92cc89733bc7e31d000e21deaaf8e413 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AE=B8=E6=B9=98=E7=90=AA?= <2831539223@qq.com> Date: Tue, 25 Apr 2023 08:58:53 +0800 Subject: [PATCH 1/9] =?UTF-8?q?=E8=B7=AF=E7=94=B1=E5=85=A5=E9=97=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...57\347\224\261\345\205\245\351\227\250.md" | 117 ++++++++++++++++++ .../img/230423/1.png" | Bin 0 -> 895 bytes .../img/230423/2.png" | Bin 0 -> 967 bytes .../img/230423/3.png" | Bin 0 -> 1753 bytes 4 files changed, 117 insertions(+) create mode 100644 "22 \350\256\270\346\271\230\347\220\252/230423-1\347\217\255\350\267\257\347\224\261\345\205\245\351\227\250.md" create mode 100644 "22 \350\256\270\346\271\230\347\220\252/img/230423/1.png" create mode 100644 "22 \350\256\270\346\271\230\347\220\252/img/230423/2.png" create mode 100644 "22 \350\256\270\346\271\230\347\220\252/img/230423/3.png" diff --git "a/22 \350\256\270\346\271\230\347\220\252/230423-1\347\217\255\350\267\257\347\224\261\345\205\245\351\227\250.md" "b/22 \350\256\270\346\271\230\347\220\252/230423-1\347\217\255\350\267\257\347\224\261\345\205\245\351\227\250.md" new file mode 100644 index 0000000..73745e3 --- /dev/null +++ "b/22 \350\256\270\346\271\230\347\220\252/230423-1\347\217\255\350\267\257\347\224\261\345\205\245\351\227\250.md" @@ -0,0 +1,117 @@ +# 路由入门 + +详细的官方网站: https://router.vuejs.org/zh/guide/ + +# +## 一.安装 vue-router + +### npm +``` + npm install vue-router +``` + +### yarn +``` + yarn add vue-router +``` + +# +## 二.创建路由的配置文件:JavaScript +```js +//1.引用路由组件 +import Home from './components/Home.vue' +import About from './components/About.vue' +import Student from './components/Student.vue' + +//2.定义路由 +//每个路由都映射一个组件 +const routes=[ + {path:'/',component:Home}, + {path:'/about',component:About}, + {path:'/student',component:Student} +] + +//3.创建路由实例并传递 `routes` 配置 +//createRouter():需要引入 +const router=createRouter({ + + //4.提供 history 模式 + // history:createWebHashHistory(),//路由会带#号 + history:createWebHistory(),//使用时路由不带#号，但是会有点小问题，后面解决 + + routes//`routes:routes` 的缩写 +}) + + +//5.创建并挂载实例 + +// createApp(App).use(router).mount('#app') + +const app=createApp(App) + +//让整个项目都支持路由 +app.use(router) +app.mount('#app') +``` + +# +## 三.RouterLink 和 RouterView + +### RouterLink : 入口 + ++ RouterLink 实现路由之间的跳转 + ++ RouterLink 对应 html 中的a 标签,但是与a 标签不同的是,跳转的时候并**不会刷新页面** + ++ RouterLink映射的结果为其对应组件的整个页面内容 + +```html + + 前往 +
+ 返回 +``` + +### RouterView : 出口 + ++ RouterView 根据路由显示对应的组件,当你的路由path 与访问的地址相符时，会将指定的组件替换 + ++ RouterView 相当于RouterLink的承载页面,用于展示RouterLink 的的内容 + +```html + +``` + +# +## 四.显示页面有按钮 + ++ 在 App.vue 中导入首页 +```vue + + + +``` +![1](./img/230423/1.png) +![3](./img/230423/3.png) + +# +## 五.显示页面无按钮存在 + ++ 在 App.vue 中设置出口 RouterView +```vue + + + +``` +![1](./img/230423/1.png) +![2](./img/230423/2.png) \ No newline at end of file diff --git "a/22 \350\256\270\346\271\230\347\220\252/img/230423/1.png" "b/22 \350\256\270\346\271\230\347\220\252/img/230423/1.png" new file mode 100644 index 0000000000000000000000000000000000000000..ff695b19c6d297b941d9f3dba12fde2507db77b7 GIT binary patch literal 895 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 Lw@X#_e)0bT9P>+I literal 0 HcmV?d00001 -- Gitee From 55e59f8678fed2aab1bc235f7ffd9749e8be1b5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AE=B8=E6=B9=98=E7=90=AA?= <2831539223@qq.com> Date: Tue, 25 Apr 2023 09:33:57 +0800 Subject: [PATCH 2/9] =?UTF-8?q?=E5=8A=A8=E6=80=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...57\347\224\261\345\205\245\351\227\250.md" | 2 +- ...57\347\224\261\345\214\271\351\205\215.md" | 154 ++++++++++++++++++ 2 files changed, 155 insertions(+), 1 deletion(-) create mode 100644 "22 \350\256\270\346\271\230\347\220\252/230424-1\347\217\255\345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215.md" diff --git "a/22 \350\256\270\346\271\230\347\220\252/230423-1\347\217\255\350\267\257\347\224\261\345\205\245\351\227\250.md" "b/22 \350\256\270\346\271\230\347\220\252/230423-1\347\217\255\350\267\257\347\224\261\345\205\245\351\227\250.md" index 73745e3..ebe4b57 100644 --- "a/22 \350\256\270\346\271\230\347\220\252/230423-1\347\217\255\350\267\257\347\224\261\345\205\245\351\227\250.md" +++ "b/22 \350\256\270\346\271\230\347\220\252/230423-1\347\217\255\350\267\257\347\224\261\345\205\245\351\227\250.md" @@ -66,7 +66,7 @@ app.mount('#app') + RouterLink映射的结果为其对应组件的整个页面内容 ```html - + 前往
返回 diff --git "a/22 \350\256\270\346\271\230\347\220\252/230424-1\347\217\255\345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215.md" "b/22 \350\256\270\346\271\230\347\220\252/230424-1\347\217\255\345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215.md" new file mode 100644 index 0000000..3ce0922 --- /dev/null +++ "b/22 \350\256\270\346\271\230\347\220\252/230424-1\347\217\255\345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215.md" @@ -0,0 +1,154 @@ +# 动态路由匹配 + +详细的官方网站: https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html + +# +## 一.设置路由的匹配 + ++ 进入路由配置文件，在定义的路由中添加相关的路径信息 + +### 带参路由的动态匹配 + ++ 路径参数 用**冒号 :** 表示。当一个路由被匹配时，它的 params 的值将在每个组件中以 **this.$route.params** 的形式暴露出来。 + ++ **component** 获取要跳转页面的位置 + +```js +//2.定义路由 +const routes = [ + { path: '/student/:id', component: StudentId }, +] +``` + +### 错误路由的匹配 + ++ 在括号之间使用了自定义正则表达式，并将 **pathMatch** 参数标记为可选可重复。 + ++ 在 to 中输入 **/:pathMatch(.*)** 匹配错误的路径信息 + ++ + **component** 获取要跳转页面的位置 + +```js +//2.定义路由 +const routes = [ + //将匹配不到的报错页面，跳转为此页面 + { path: '/:pathMatch(.*)', component: NotFound } +] +``` + +# +## 二.获取路由信息 + ++ **vue2**路由是通过this.$route和this.$router来控制的 + ++ **vue3**的路由中 + + + **useRoute** 相当于以前的 **this.$route**， + + + **useRouter** 相当于 **this.$router** + +### userRouter + ++ 通过useRouter来手动控制路由变化 + ++ push方法是useRouter()才有的 + + + + +### userRoute + ++ **push方法** 是useRouter()才有的, 用**useRoute()实例化**的对象是没这方法的 + + +### $route + ++ **$route** 是一个跳转的路由对象，每一个路由都会有一个route对象 + ++ **$route** 是一个**局部的对象**，可以获取对应的name,path,params,query等 + + + **$route.path** :获取当前路由对象的路径，会被解析为绝对路径，如 “/index/” 。 + + + **$route.params** ：获取包含路由中的动态片段和全匹配片段的键值对 + + + **$route.query** ：获取 **? 号传参**包含路由中查询参数的键值对。例如，对于 /index?id=1 ，会得到 $route.query.id == 1。 +```js + { path: '/student/:id', component: StudentId }, +``` +```html +

这里是id为{{ $route.params.id}} 的页面

+``` + +### $router + ++ **$router** 是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象 + ++ **$router** 是一个**全局的对象**，包含了所有的路由包含了许多关键的对象和属性。例如history对象 + + + **$router.push({path:’/path’})** : 本质是向history栈中添加一个路由，在我们看来是 切换路由，但本质是在添加一个history记录 + + + **$router.replace({path:’/path’})** : 替换路由，没有历史记录 + + +# +## 三.响应路由变化 :watch + ++ 使用 **watch 侦听器** 获取路由的变化 + +### 选项式中 +```vue + +``` + +### 组合式 +```vue + +``` \ No newline at end of file -- Gitee From df47b1c2f7c5065b9bbbc396fb9cea41c81316fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AE=B8=E6=B9=98=E7=90=AA?= <2831539223@qq.com> Date: Tue, 25 Apr 2023 09:37:12 +0800 Subject: [PATCH 3/9] =?UTF-8?q?=E5=8A=A8=E6=80=81=E5=8C=B9=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...7\257\347\224\261\345\214\271\351\205\215.md" | 5 ++++- .../img/230424/1.png" | Bin 0 -> 3237 bytes .../img/230424/2.png" | Bin 0 -> 996 bytes .../img/230424/3.png" | Bin 0 -> 9627 bytes 4 files changed, 4 insertions(+), 1 deletion(-) create mode 100644 "22 \350\256\270\346\271\230\347\220\252/img/230424/1.png" create mode 100644 "22 \350\256\270\346\271\230\347\220\252/img/230424/2.png" create mode 100644 "22 \350\256\270\346\271\230\347\220\252/img/230424/3.png" diff --git "a/22 \350\256\270\346\271\230\347\220\252/230424-1\347\217\255\345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215.md" "b/22 \350\256\270\346\271\230\347\220\252/230424-1\347\217\255\345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215.md" index 3ce0922..23c81b1 100644 --- "a/22 \350\256\270\346\271\230\347\220\252/230424-1\347\217\255\345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215.md" +++ "b/22 \350\256\270\346\271\230\347\220\252/230424-1\347\217\255\345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215.md" @@ -151,4 +151,7 @@ export default { }) -``` \ No newline at end of file +``` +![1](./img/230424/1.png) +![2](./img/230424/2.png) +![3](./img/230424/3.png) \ No newline at end of file diff --git "a/22 \350\256\270\346\271\230\347\220\252/img/230424/1.png" "b/22 \350\256\270\346\271\230\347\220\252/img/230424/1.png" new file mode 100644 index 0000000000000000000000000000000000000000..196d46cd74f6225280306aa58012c35a73ceafd6 GIT binary patch literal 3237 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 p)mDlZ)_?cm-XJ(hXi;vLYg# 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 literal 0 HcmV?d00001 -- Gitee From a37865a7263c4ae9d3746411242bfd1841aec718 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AE=B8=E6=B9=98=E7=90=AA?= <2831539223@qq.com> Date: Tue, 25 Apr 2023 09:40:50 +0800 Subject: [PATCH 4/9] =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...57\347\224\261\345\214\271\351\205\215.md" | 37 ++++++++++--------- 1 file changed, 19 insertions(+), 18 deletions(-) diff --git "a/22 \350\256\270\346\271\230\347\220\252/230424-1\347\217\255\345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215.md" "b/22 \350\256\270\346\271\230\347\220\252/230424-1\347\217\255\345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215.md" index 23c81b1..6b412f3 100644 --- "a/22 \350\256\270\346\271\230\347\220\252/230424-1\347\217\255\345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215.md" +++ "b/22 \350\256\270\346\271\230\347\220\252/230424-1\347\217\255\345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215.md" @@ -47,25 +47,11 @@ const routes = [ + **useRouter** 相当于 **this.$router** -### userRouter - -+ 通过useRouter来手动控制路由变化 - -+ push方法是useRouter()才有的 - - - - -### userRoute - -+ **push方法** 是useRouter()才有的, 用**useRoute()实例化**的对象是没这方法的 - - ### $route -+ **$route** 是一个跳转的路由对象，每一个路由都会有一个route对象 ++ **route** 是一个跳转的路由对象，每一个路由都会有一个route对象 -+ **$route** 是一个**局部的对象**，可以获取对应的name,path,params,query等 ++ **route** 是一个**局部的对象**，可以获取对应的name,path,params,query等 + **$route.path** :获取当前路由对象的路径，会被解析为绝对路径，如 “/index/” 。 @@ -79,16 +65,31 @@ const routes = [

这里是id为{{ $route.params.id}} 的页面

``` + +### userRoute + ++ 相当于 $route + ++ **push方法** 是useRouter()才有的, 用**useRoute()实例化**的对象是没这方法的 + + ### $router -+ **$router** 是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象 ++ **router** 是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象 -+ **$router** 是一个**全局的对象**，包含了所有的路由包含了许多关键的对象和属性。例如history对象 ++ **router** 是一个**全局的对象**，包含了所有的路由包含了许多关键的对象和属性。例如history对象 + **$router.push({path:’/path’})** : 本质是向history栈中添加一个路由，在我们看来是 切换路由，但本质是在添加一个history记录 + **$router.replace({path:’/path’})** : 替换路由，没有历史记录 +### userRouter + ++ 相当于 $router + ++ 通过useRouter来手动控制路由变化 + ++ push方法是useRouter()才有的 # ## 三.响应路由变化 :watch -- Gitee From a25a0beea1854cd66b18425241e28298e64b3ddb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AE=B8=E6=B9=98=E7=90=AA?= <2831539223@qq.com> Date: Tue, 25 Apr 2023 11:41:34 +0800 Subject: [PATCH 5/9] =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...350\267\257\347\224\261\345\214\271\351\205\215.md" | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git "a/22 \350\256\270\346\271\230\347\220\252/230424-1\347\217\255\345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215.md" "b/22 \350\256\270\346\271\230\347\220\252/230424-1\347\217\255\345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215.md" index 6b412f3..f210af1 100644 --- "a/22 \350\256\270\346\271\230\347\220\252/230424-1\347\217\255\345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215.md" +++ "b/22 \350\256\270\346\271\230\347\220\252/230424-1\347\217\255\345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215.md" @@ -71,7 +71,10 @@ const routes = [ + 相当于 $route + **push方法** 是useRouter()才有的, 用**useRoute()实例化**的对象是没这方法的 - +```js +//实例化 +const route=userRoute() +``` ### $router @@ -91,6 +94,11 @@ const routes = [ + push方法是useRouter()才有的 +```js +//实例化 +const router=userRouter() +``` + # ## 三.响应路由变化 :watch -- Gitee From 408e4e4d497e61b9ac5c3833ff4613aebc810f91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AE=B8=E6=B9=98=E7=90=AA?= <2831539223@qq.com> Date: Thu, 27 Apr 2023 11:42:39 +0800 Subject: [PATCH 6/9] =?UTF-8?q?=E5=B5=8C=E5=A5=97=E8=B7=AF=E7=94=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...5\265\214\345\245\227\350\267\257\347\224\261.md" | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 "22 \350\256\270\346\271\230\347\220\252/230425-1\347\217\255children\345\265\214\345\245\227\350\267\257\347\224\261.md" diff --git "a/22 \350\256\270\346\271\230\347\220\252/230425-1\347\217\255children\345\265\214\345\245\227\350\267\257\347\224\261.md" "b/22 \350\256\270\346\271\230\347\220\252/230425-1\347\217\255children\345\265\214\345\245\227\350\267\257\347\224\261.md" new file mode 100644 index 0000000..0dafe7e --- /dev/null +++ "b/22 \350\256\270\346\271\230\347\220\252/230425-1\347\217\255children\345\265\214\345\245\227\350\267\257\347\224\261.md" @@ -0,0 +1,12 @@ +# 嵌套路由:children + +详细的官方网站 : https://router.vuejs.org/zh/guide/essentials/nested-routes.html + +# +## 使用方式 + ++ 在自己的路由配置文件里面创建对应的路由 + ++ 子路由需要在 父路由 对应的参数中使用 **children** 配置； + ++ 切记，在children 中，子路由的路径不要加 / ； \ No newline at end of file -- Gitee From 7822b0e3d2fac7957e81522af33026effe5a03bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AE=B8=E6=B9=98=E7=90=AA?= <28318539223@qq.com> Date: Fri, 28 Apr 2023 16:40:28 +0800 Subject: [PATCH 7/9] =?UTF-8?q?=E5=91=BD=E5=90=8D=E8=A7=86=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...14\345\245\227\350\267\257\347\224\261.md" | 26 ++- ...75\345\220\215\350\247\206\345\233\276.md" | 184 ++++++++++++++++++ 2 files changed, 209 insertions(+), 1 deletion(-) create mode 100644 "22 \350\256\270\346\271\230\347\220\252/230427-1\347\217\255\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\345\222\214components\345\221\275\345\220\215\350\247\206\345\233\276.md" diff --git "a/22 \350\256\270\346\271\230\347\220\252/230425-1\347\217\255children\345\265\214\345\245\227\350\267\257\347\224\261.md" "b/22 \350\256\270\346\271\230\347\220\252/230425-1\347\217\255children\345\265\214\345\245\227\350\267\257\347\224\261.md" index 0dafe7e..e7f574f 100644 --- "a/22 \350\256\270\346\271\230\347\220\252/230425-1\347\217\255children\345\265\214\345\245\227\350\267\257\347\224\261.md" +++ "b/22 \350\256\270\346\271\230\347\220\252/230425-1\347\217\255children\345\265\214\345\245\227\350\267\257\347\224\261.md" @@ -9,4 +9,28 @@ + 子路由需要在 父路由 对应的参数中使用 **children** 配置； -+ 切记，在children 中，子路由的路径不要加 / ； \ No newline at end of file ++ 切记，在children 中，子路由的路径不要加 / ； +```js + +//定义路由 +const routes=[ + {path:'/',component:Home}, + { + path:'/about', + component:About, + //嵌套路由 + children:[ + { + //当 /about/:id 是匹配成功 + //(\\d+)自能为数字 + path:':id(\\d+)', + // AboutId 将被渲染到 About 的 RouterView 内部 + component:AboutId + } + ] + }, + {path:'/student',component:Student}, + {path:'/student/:id(\\d+)',component:StudentId}, + {path:'/:pathMatch*',component:NotFund} +] +``` \ No newline at end of file diff --git "a/22 \350\256\270\346\271\230\347\220\252/230427-1\347\217\255\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\345\222\214components\345\221\275\345\220\215\350\247\206\345\233\276.md" "b/22 \350\256\270\346\271\230\347\220\252/230427-1\347\217\255\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\345\222\214components\345\221\275\345\220\215\350\247\206\345\233\276.md" new file mode 100644 index 0000000..907d490 --- /dev/null +++ "b/22 \350\256\270\346\271\230\347\220\252/230427-1\347\217\255\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\345\222\214components\345\221\275\345\220\215\350\247\206\345\233\276.md" @@ -0,0 +1,184 @@ +# 编程式导航和components 命名视图 + +# +## 一.编程式导航 + ++ 编程式导航就是以编写代码的形式，实现 RouterLink 创建 a 标签定义导航链接的作用 + +# +### 导航到指定的url + ++ 选项式的使用 + + + 使用 **this.$router.push** 方法实现导航到指定的url + + + **this.$router.push** 方法会向 history 栈添加一个新的记录，当点击浏览器后退按钮时，会回到之前的 URL。 + +```vue + +``` + ++ 组合式的使用 + + + 导入 **useRouter** 方法，并实例化 + + + 使用 **router.push** 方法实现导航到指定的url +```vue + +``` + ++ 一些方法的使用 + + + 在 **{}** ，使用 **path** 时， **params** 会被忽略 + + + **params** 可以与 name (命名的路由)一起使用 +```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' }) + +``` + +# +### 不添加历史记录: router.replace({}) + +``` + 1. 作用与 router.push 类似，唯一的不同是， router.push 在导航时会向 history 添加新的历史记录，而 router.replace 不会 + + 2. router.push 转换为 router.replace 的方法是: 添加一个 replace:true 属性 +``` +```js + router.push({ path: '/home', replace: true }) + // 相当于 + router.replace({ path: '/home' }) + +``` + +# +### 横跨历史记录 :router.go + ++ router.go(n) 方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步 +```js +// 向前移动一条记录，与 router.forward() 相同 +router.go(1) + +// 返回一条记录，与 router.back() 相同 +router.go(-1) + +// 前进 3 条记录 +router.go(3) + +// 如果没有那么多记录，静默失败 +router.go(-100) +router.go(100) +``` + +# +## components 命名视图 + ++ 一个视图使用一个组件渲染，对于同个路由，多个视图就需要多个组件。为了保证各组件的正确使用，在配置路由时，使用了 **components)** 配置(比原来多了个s) + +# +### 单命名视图 +```js +const router = createRouter({ + history: createWebHashHistory(), + routes: [ + { + path: '/', + components: { + default: Home, + // UserId: UserId 的缩写 + UserId, + // 它们与 `` 上的 `name` 属性匹配 + About, + }, + }, + ], +}) +``` + +# +### 嵌套命名路由 + ++ 在 children 中 使用 components 配置 +```html +
+ 这是主页 +
+ +
+
+ + + +
+ +
+``` +```js +const routes = [ + { + path: '/', + component: Home, + children: [ + { + path:'/emails', + component:Emails + },{ + path:'/user', + components:{ + default:User, + //相当于 UserId :UserId + UserId, + //与 RouterView 的name 对应 + About + } + } + ] + }, { + path: '/:pathWatch(.*)*', + component: NotFund + } +] +``` \ No newline at end of file -- Gitee From 0c62d27c7c84b6c89b0a623f21764f98b1d503d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AE=B8=E6=B9=98=E7=90=AA?= <28318539223@qq.com> Date: Fri, 28 Apr 2023 17:35:06 +0800 Subject: [PATCH 8/9] element-plus --- ...us\347\232\204\344\275\277\347\224\250.md" | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 "22 \350\256\270\346\271\230\347\220\252/230428-1\347\217\255element-plus\347\232\204\344\275\277\347\224\250.md" diff --git "a/22 \350\256\270\346\271\230\347\220\252/230428-1\347\217\255element-plus\347\232\204\344\275\277\347\224\250.md" "b/22 \350\256\270\346\271\230\347\220\252/230428-1\347\217\255element-plus\347\232\204\344\275\277\347\224\250.md" new file mode 100644 index 0000000..98ef7b3 --- /dev/null +++ "b/22 \350\256\270\346\271\230\347\220\252/230428-1\347\217\255element-plus\347\232\204\344\275\277\347\224\250.md" @@ -0,0 +1,32 @@ +# element-ui 的使用 + +官方文档: https://element-plus.gitee.io/zh-CN/ + +# +## 一.安装 element-plus 包管理器 +```js +// yarn + yarn add element-plus + +// npm + npm install element-plus --save + +// pnpm + pnpm install element-plus +``` + +# +## 二.全局引入配置 + ++ 在 main.js 文件中配置 +```js +//导入 element-pius 和相关文件 +import ElementPlus from 'element-plus' +import 'element-plus/dist/index.css' + +const app=createApp(app) +//全局配置 +app.use(ElementPlus) + +app.mount('#app') +``` \ No newline at end of file -- Gitee From 5f7ad4fe17ec99bba216bbc4ff09b4b877b17738 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AE=B8=E6=B9=98=E7=90=AA?= <2831539223@qq.com> Date: Fri, 28 Apr 2023 20:05:26 +0800 Subject: [PATCH 9/9] element-plus --- ...\217\255element-plus\347\232\204\344\275\277\347\224\250.md" | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git "a/22 \350\256\270\346\271\230\347\220\252/230428-1\347\217\255element-plus\347\232\204\344\275\277\347\224\250.md" "b/22 \350\256\270\346\271\230\347\220\252/230428-1\347\217\255element-plus\347\232\204\344\275\277\347\224\250.md" index 98ef7b3..81bc2c2 100644 --- "a/22 \350\256\270\346\271\230\347\220\252/230428-1\347\217\255element-plus\347\232\204\344\275\277\347\224\250.md" +++ "b/22 \350\256\270\346\271\230\347\220\252/230428-1\347\217\255element-plus\347\232\204\344\275\277\347\224\250.md" @@ -1,4 +1,4 @@ -# element-ui 的使用 +# element-plus 的使用 官方文档: https://element-plus.gitee.io/zh-CN/ -- Gitee