From 61d138d82ff5310eee56d1393dde75d91d21a06f Mon Sep 17 00:00:00 2001
From: XY <1719746484@qq.com>
Date: Sun, 20 Jun 2021 19:53:40 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B7=AF=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../note-06-15-21.md"                         |  14 +
 .../note-06-16-21.md"                         | 125 +++++++++
 .../note-06-18-21.md"                         |  96 +++++++
 .../note-06-19-21.md"                         | 254 ++++++++++++++++++
 4 files changed, 489 insertions(+)
 create mode 100644 "\346\254\247\351\230\263\347\276\216\346\235\217/note-06-15-21.md"
 create mode 100644 "\346\254\247\351\230\263\347\276\216\346\235\217/note-06-16-21.md"
 create mode 100644 "\346\254\247\351\230\263\347\276\216\346\235\217/note-06-18-21.md"
 create mode 100644 "\346\254\247\351\230\263\347\276\216\346\235\217/note-06-19-21.md"

diff --git "a/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-15-21.md" "b/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-15-21.md"
new file mode 100644
index 0000000..e8357bd
--- /dev/null
+++ "b/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-15-21.md"
@@ -0,0 +1,14 @@
+# 路由
+
+```
+`<a>`标签
+<router-link to="/foo">Go to Foo</router-link>
+
+```
+
+```
+路由出口
+写在app.vue文件
+<router-view></router-view>
+
+```
\ No newline at end of file
diff --git "a/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-16-21.md" "b/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-16-21.md"
new file mode 100644
index 0000000..1c8576c
--- /dev/null
+++ "b/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-16-21.md"
@@ -0,0 +1,125 @@
+# 动态路由匹配
+
+```
+main.js里，会有动态路径参数，以冒号开头
+
+import Vue from 'vue'
+import App from './App.vue'
+import VueRouter from "vue-router"
+
+import Profile from "./components/Profile"
+
+Vue.config.productionTip = false
+
+let router=new VueRouter({
+     mode:"history",
+     routes:[
+       {
+           //动态路径参数，以冒号为开头
+         path:"/profile/id",
+         component:Profile
+       }
+     ]
+})
+
+Vue.use(VueRouter)
+
+new Vue({
+  router,
+  render: h => h(App),
+}).$mount('#app')
+
+
+```
+
+```
+捕获404 NOT found路由
+
+path:"*"//会匹配所有路径
+
+path：“/user-*”会匹配以`/user-`开头的任意路径
+
+在main文件里
+
+import Vue from 'vue'
+import App from './App.vue'
+import VueRouter from "vue-router"
+
+import Profile from "./components/Profile"
+import P404 from "./components/404"
+
+Vue.config.productionTip = false
+
+let router=new VueRouter({
+     mode:"history",
+     routes:[
+       {
+        path:"*",
+        component:P404
+       },
+       {
+         path:"/profile/:uuname",
+         component:Profile
+       }
+     ]
+})
+
+Vue.use(VueRouter)
+
+new Vue({
+  router,
+  render: h => h(App),
+}).$mount('#app')
+
+新创建的404.vue文件
+
+<template>
+    <div>
+        啦啦啦啦啦啦
+    </div>
+</template>
+
+```
+```
+这里新创建的文件，Profile.vue
+
+<template>
+  <div>
+    <ul>
+      <li>wendy</li>
+      <li>zhongli</li>
+      <li>gongzi</li>
+      <li>xiao</li>
+    </ul>
+
+    <h1>{{$route.params.uuname}}</h1>
+  </div>
+</template>
+
+<script>
+export default {
+    data:function(){
+        return{
+
+        }
+    },
+    created:function(){
+        console.log(2233);
+    },
+    mounted:function(){
+        console.log(this.$route.params.uuname);
+        console.log(this.$route.query);
+    }
+}
+</script>
+
+<style scoped>
+li{
+    color: aqua;
+}
+li:hover{
+    content: ">";
+}
+</style>
+
+```
\ No newline at end of file
diff --git "a/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-18-21.md" "b/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-18-21.md"
new file mode 100644
index 0000000..4cd27a2
--- /dev/null
+++ "b/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-18-21.md"
@@ -0,0 +1,96 @@
+# 第十五节Vue课堂笔记
+## 编程式的导航
+
+```
+在Vue实例内部，可以通过$router访问路由实例，可以调用this.$router.push
+
+声明式  <router-link :to="...">
+
+编程式  router.push(...)
+
+在main.js文件里
+import Vue from 'vue'
+import App from './App.vue'
+
+import VueRouter from "vue-router"
+
+import User from './components/User';
+import Login from './components/Login';
+import Register from './components/Register';
+
+Vue.config.productionTip = false
+
+Vue.use(VueRouter)
+
+let router=new VueRouter({
+  mode:"history",
+  routes:[
+    {
+      path:"/user",
+      component:User
+    },
+    {
+      path:"/login",
+      component:Login
+    },
+    {
+      path:"/register",
+      component:Register
+    },
+
+  ]
+})
+
+new Vue({
+  router,
+  render: h => h(App),
+}).$mount('#app')
+
+app.vue里面
+
+<template>
+  <div id="app">
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  name: 'App',
+  components: {
+  },
+  mounted:function(){
+    // let id=2233
+    setTimeout(() => {
+      if(this.$route.to!=="/login"){
+        this.$router.push({
+          path:`login`,             //如果是path，prams会被忽略掉，query就可以
+         
+      
+        })
+      }
+    }, 2000);
+  },
+  beforeRouteUpdate:function(to,from,next){
+    console.log(to);
+    console.log(from);
+    console.log(next);
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
+
+
+```
\ No newline at end of file
diff --git "a/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-19-21.md" "b/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-19-21.md"
new file mode 100644
index 0000000..21c572f
--- /dev/null
+++ "b/\346\254\247\351\230\263\347\276\216\346\235\217/note-06-19-21.md"
@@ -0,0 +1,254 @@
+# 路由
+## 命名路由
+
+```
+例子main文件里
+
+import Vue from 'vue'
+import App from './App.vue'
+import VueRouter from 'vue-router'
+import User from "./components/User"
+
+Vue.config.productionTip = false
+
+Vue.use(VueRouter)
+
+let router = new VueRouter({
+  mode:"history",
+  routes:[
+    {
+      path:"/user/:id", //路径
+      name:"user",
+      component:User
+    }
+  ]
+})
+
+new Vue({
+  router,
+  render: h => h(App),
+}).$mount('#app')
+
+
+APP.vue文件里
+
+<template>
+  <div id="app">
+    <router-link  :to="{name:'user',params:{id:2233}}">温迪</router-link>  路径，到达id为2233的用户里
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  name: 'App',
+  components: {
+   
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
+
+
+```
+# 命名视图
+
+```
+例子
+
+main里
+
+import Vue from 'vue'
+import App from './App.vue'
+import VueRouter from 'vue-router'
+import User from "./components/User"
+import Login from "./components/Login"
+import Profile from "./components/Profile"
+import Registry from "./components/Registry"
+
+
+Vue.config.productionTip = false
+
+Vue.use(VueRouter)
+
+let router = new VueRouter({
+  mode:"history",
+  routes:[
+    {
+      path:"/user",
+      name:"user",
+      components:{
+        user:User,
+        login:Login,
+        registry:Registry,
+        profile:Profile
+      }
+    }
+  ]
+})
+
+new Vue({
+  router,
+  render: h => h(App),
+}).$mount('#app')
+
+
+App.vue里
+
+<template>
+  <div id="app">
+    <router-link  :to="{name:'user',params:{id:2233}}">温迪</router-link>
+    <router-view></router-view>
+    <router-view name="login"></router-view>
+    <router-view name="registry" ></router-view>
+    <router-view name="profile"></router-view>
+    
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  name: 'App',
+  components: {
+   
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
+
+
+```
+
+# 嵌套命名视图
+## 未完成品
+
+```
+例子,main文件下
+
+import Vue from 'vue'
+import App from './App.vue'
+import VueRouter from 'vue-router'
+import UserSetting from "./components/UserSetting"
+import EmaliSetting from "./components/EmaliSetting"
+import UserProfile from "./components/UserProfile"
+import UserProfilePreview from "./components/UserProfilePreview"
+
+
+Vue.config.productionTip = false
+
+Vue.use(VueRouter)
+
+let router = new VueRouter({
+  mode:"history",
+  routes:[
+    {
+      path:"/setting",
+      name:"user",
+      component:UserSetting,
+      children:[
+        {
+          path:"emails",
+          component:EmaliSetting
+      },
+      {
+        path:"profile",
+        components:{
+          profile:UserProfile,
+          profilePreview:UserProfilePreview
+        }
+      },
+    ]
+    }
+  ]
+})
+
+new Vue({
+  router,
+  render: h => h(App),
+}).$mount('#app')
+
+
+
+
+
+
+App.vue
+
+<template>
+  <div id="app">
+    <router-link  :to="{name:'user',params:{id:2233}}">温迪</router-link>
+    <router-view></router-view>
+    
+    
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  name: 'App',
+  components: {
+   
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
+
+
+
+UserSetting.vue里
+
+<template>
+    <div>
+        用户设置
+        <hr>
+        {{id}}
+        <router-view></router-view>
+        <router-view name="profile"></router-view>
+        <router-view name="profilePreview"></router-view>
+    </div>
+</template>
+
+<script>
+export default {
+    props:["id"]
+}
+</script>
+
+
+```
\ No newline at end of file
-- 
Gitee