From 3d6a3d83337abb83269a244c9293a5fe2c0e20ef Mon Sep 17 00:00:00 2001 From: yb <1728066681@qq.com> Date: Wed, 16 Jun 2021 17:37:25 +0800 Subject: [PATCH 1/4] =?UTF-8?q?Vue=20Router=E8=AF=BE=E5=A0=82=E7=AC=94?= =?UTF-8?q?=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...2021.06.15\357\274\210Vue \357\274\211.md" | 0 ...er\350\265\267\346\255\245\357\274\211.md" | 53 +++++++++++++++++++ 2 files changed, 53 insertions(+) create mode 100644 "\346\242\201\350\211\272\347\274\244/Vue - 2021.06.15\357\274\210Vue \357\274\211.md" create mode 100644 "\346\242\201\350\211\272\347\274\244/Vue - 2021.06.16\357\274\210Vue Vue Router\350\265\267\346\255\245\357\274\211.md" diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.15\357\274\210Vue \357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.15\357\274\210Vue \357\274\211.md" new file mode 100644 index 0000000..e69de29 diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.16\357\274\210Vue Vue Router\350\265\267\346\255\245\357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.16\357\274\210Vue Vue Router\350\265\267\346\255\245\357\274\211.md" new file mode 100644 index 0000000..203c71e --- /dev/null +++ "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.16\357\274\210Vue Vue Router\350\265\267\346\255\245\357\274\211.md" @@ -0,0 +1,53 @@ +## Vue Router起步 + ++ 单页面应用(SPA)的核心之一是:更新视图而不重新请求页面; + ++ vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式。 + +1. hash模式 + +url hash 就是类似于： +``` +http://www.xxx.com/#/login +``` + +监听hashchange +``` +function matchAndUpdate () { + // todo 匹配 hash 做 dom 更新操作 +} + +window.addEventListener('hashchange', matchAndUpdate) +``` + +2. history 模式 + +``` +function matchAndUpdate () { + // todo 匹配路径 做 dom 更新操作 +} + +window.addEventListener('popstate', matchAndUpdate) +``` +### 动态路由匹配 + ++ vue-router 的路由路径中使用过 dynamic segment 来达到这个效果 +``` +const User = { + template: '
User
' +} + +const router = new VueRouter({ + routes: [ + // 动态路径参数 以冒号开头 + { path: '/user/:id', component: User } + ] +}) +``` +像 /user/foo 和 /user/bar 都将映射到相同的路由。 + +``` +const User = { + template: '
User {{ $route.params.id }}
' +} +``` -- Gitee From 0da8a1aa978963e62f7fc152a1e64a5f2844fb82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A2=81=E8=89=BA=E7=BC=A4?= <1728066681@qq.com> Date: Thu, 17 Jun 2021 21:14:41 +0800 Subject: [PATCH 2/4] =?UTF-8?q?Vue=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...2021.06.15\357\274\210Vue \357\274\211.md" | 0 ...e\350\267\257\347\224\261 \357\274\211.md" | 30 +++++++++++++++ ...er\350\265\267\346\255\245\357\274\211.md" | 38 +++++++++++++++++++ 3 files changed, 68 insertions(+) delete mode 100644 "\346\242\201\350\211\272\347\274\244/Vue - 2021.06.15\357\274\210Vue \357\274\211.md" create mode 100644 "\346\242\201\350\211\272\347\274\244/Vue - 2021.06.15\357\274\210Vue\350\267\257\347\224\261 \357\274\211.md" diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.15\357\274\210Vue \357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.15\357\274\210Vue \357\274\211.md" deleted file mode 100644 index e69de29..0000000 diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.15\357\274\210Vue\350\267\257\347\224\261 \357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.15\357\274\210Vue\350\267\257\347\224\261 \357\274\211.md" new file mode 100644 index 0000000..e1665c8 --- /dev/null +++ "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.15\357\274\210Vue\350\267\257\347\224\261 \357\274\211.md" @@ -0,0 +1,30 @@ +## Vue 路由 + +1. yarn 安装 vue-router + ++ 安装命令 +``` +yarn add vue-router +``` + +2. mian.js 引用并注册路由 +``` +// 引用路由 +import VueRouter from "vue-router" +// 引用vue文件 +import Show from "./components/Show" + +// 路由配置 +let router = new VueRouter({ + mode:"history", + routes:[ + { + path:"/show", + component:Show + } + ] +}) + +// 注册路由 +Vue.use(VueRouter) +``` diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.16\357\274\210Vue Vue Router\350\265\267\346\255\245\357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.16\357\274\210Vue Vue Router\350\265\267\346\255\245\357\274\211.md" index 203c71e..1159ce1 100644 --- "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.16\357\274\210Vue Vue Router\350\265\267\346\255\245\357\274\211.md" +++ "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.16\357\274\210Vue Vue Router\350\265\267\346\255\245\357\274\211.md" @@ -51,3 +51,41 @@ const User = { template: '
User {{ $route.params.id }}
' } ``` +1. 前端渲染 +``` +// vue组件页面配置 + +``` + +2. 后端打印 +``` + +``` + +### 404 Not Found Rount + +添加path地址为*的路由 +``` +// 路由配置 +let router = new VueRouter({ + mode:"history", + routes:[ + { + path:"*", // *为通配符 + component:Vue文件地址 + } + ] +}) +``` -- Gitee From 83d5a54e3ddcb416209b1e3e492171d80be5bbce Mon Sep 17 00:00:00 2001 From: yb <1728066681@qq.com> Date: Fri, 18 Jun 2021 11:45:21 +0800 Subject: [PATCH 3/4] =?UTF-8?q?Vue=E8=AF=BE=E5=A0=82=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...17\345\257\274\350\210\252\357\274\211.md" | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 "Vue - 2021.06.16\357\274\210Vue \347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\357\274\211.md" diff --git "a/Vue - 2021.06.16\357\274\210Vue \347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\357\274\211.md" "b/Vue - 2021.06.16\357\274\210Vue \347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\357\274\211.md" new file mode 100644 index 0000000..3ce897a --- /dev/null +++ "b/Vue - 2021.06.16\357\274\210Vue \347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\357\274\211.md" @@ -0,0 +1,22 @@ +# 编程式导航 + +1. Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push +``` +// 字符串 +this.$router.push('home') +``` +``` +// 对像 +router.push({ path: 'home' }) +``` +``` +// 命名路由 +router.push({ name: 'user', params: { userId: '123' } }) +``` +``` +// 带 query 参数, 最终结果 /register?plan=private +router.push({ path: 'register', query: { plan: 'private' } }) +``` + +2. router.replace(location) +注意：跟 router.push 很像，唯一不同是，不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。 \ No newline at end of file -- Gitee From 56ddce55e6f361b7785bd1d18aeff33370e90df6 Mon Sep 17 00:00:00 2001 From: yb <1728066681@qq.com> Date: Sat, 19 Jun 2021 17:45:47 +0800 Subject: [PATCH 4/4] vue --- ...27\350\267\257\347\224\261\357\274\211.md" | 92 +++++++++++++++++++ ...17\345\257\274\350\210\252\357\274\211.md" | 0 2 files changed, 92 insertions(+) create mode 100644 "\346\242\201\350\211\272\347\274\244/Vue - 2021.06.18\357\274\210Vue \345\265\214\345\245\227\350\267\257\347\224\261\357\274\211.md" rename "Vue - 2021.06.16\357\274\210Vue \347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\357\274\211.md" => "\346\242\201\350\211\272\347\274\244/Vue - 2021.06.18\357\274\210Vue \347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\357\274\211.md" (100%) diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.18\357\274\210Vue \345\265\214\345\245\227\350\267\257\347\224\261\357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.18\357\274\210Vue \345\265\214\345\245\227\350\267\257\347\224\261\357\274\211.md" new file mode 100644 index 0000000..f32f096 --- /dev/null +++ "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.18\357\274\210Vue \345\265\214\345\245\227\350\267\257\347\224\261\357\274\211.md" @@ -0,0 +1,92 @@ +# 命名路由 + +优点：当地址过长时，使用一个名称来标识一个路由会显得尤其方便 + +1. 在routers配置路由的时候给路由取个名 +``` +App.Vue + + +``` +``` +main.js +let router = new VueRouter({ + mode:'history', + routes:[ + { + path:'/user/:id', + name:'user', + component:User, + } + ] +}) +``` + +# 命名视图 + +1. 给不同的router-view定义不同的名字，通过名字进行对应组件的渲染 + +2. 由/所在的页面，也就是app.vue，我们第一个router-view不命名就使用默认的，其它两个router-view添加name属性命名 + +``` +import VueRouter from 'vue-router' + +import User from './components/User' +import Login from './components/Login' +// import Reg from './components/Reg' + + +Vue.config.productionTip = false + +Vue.use(VueRouter) + +let router = new VueRouter({ + routes: [ + { + path: '/user', + name:'/', + components: { + user:User, + login:Login, + } + } + ] +}) +``` +``` + //空的 + //登录页 +``` + +# 重定向和别名 + +## 重定向 + +1 . 重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b： + +``` +const router = new VueRouter({ + routes: [ + { path: '/a', redirect: '/b' } + ] +}) +``` + +2. 重定向的目标也可以是一个命名的路由： + +``` +const router = new VueRouter({ + routes: [ + { path: '/a', redirect: { name: 'foo' }} + ] +}) +``` diff --git "a/Vue - 2021.06.16\357\274\210Vue \347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.18\357\274\210Vue \347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\357\274\211.md" similarity index 100% rename from "Vue - 2021.06.16\357\274\210Vue \347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\357\274\211.md" rename to "\346\242\201\350\211\272\347\274\244/Vue - 2021.06.18\357\274\210Vue \347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\357\274\211.md" -- Gitee