add hash change

Author: wintercn

reactivity/src/App.vue

@@ -1,78 +1,32 @@
 <template>
   <div id="demo">
-    <h1>Latest Vue.js Commits</h1>
-    <input v-model="a" /> 
-    <template v-for="branch in branches">
-      <input type="radio"
-        :id="branch"
-        :value="branch"
-        name="branch"
-        v-model="currentBranch">
-      <label :for="branch">{{ branch }}</label>
-    </template>
-    <p>vuejs/vue@{{ currentBranch }}</p>
-    <ul>
-      <li v-for="{ html_url, sha, author, commit } in commits">
-        <a :href="html_url" target="_blank" class="commit">{{ sha.slice(0, 7) }}</a>
-        - <span class="message">{{ truncate(commit.message) }}</span><br>
-        by <span class="author"><a :href="author.html_url" target="_blank">{{ commit.author.name }}</a></span>
-        at <span class="date">{{ formatDate(commit.author.date) }}</span>
-      </li>
-    </ul>
+    {{route.value}}
+    <LocalStorage v-if="route.value == '#LocalStorage'"/>
+    <Fragment v-if="route.value == '#Fragment'"/>
+    <HTTPRequest v-if="route.value == '#HTTPRequest'"/>
+    
   </div>
 </template>
 
 <script>
-const API_URL = `https://api.github.com/repos/vuejs/vue-next/commits?per_page=3&sha=`
+import LocalStorage from "./LocalStorage.vue"
+import Fragment from "./Fragment.vue"
+import HTTPRequest from "./HTTPRequest.vue"
 
-export default {
-  data: () => ({
-    branches: ['master', 'sync'],
-    currentBranch: 'master',
-    commits: null,
-    a:1
-  }),
 
-  created() {
-    this.fetchData()
-  },
+import Hash from "./Hash.js"
 
-  watch: {
-    currentBranch: 'fetchData'
+export default {
+  components: {
+    LocalStorage, Fragment, HTTPRequest
   },
+  data: () => ({
+    route: Hash(),
+  })
 
-  methods: {
-    fetchData() {
-      fetch(`${API_URL}${this.currentBranch}`)
-        .then(res => res.json())
-        .then(data => {
-          this.commits = data
-        })
-    },
-    truncate(v) {
-      const newline = v.indexOf('\n')
-      return newline > 0 ? v.slice(0, newline) : v
-    },
-    formatDate(v) {
-      return v.replace(/T|Z/g, ' ')
-    }
-  }
 }
 </script>
 
 <style>
-  #demo {
-    font-family: 'Helvetica', Arial, sans-serif;
-  }
-  a {
-    text-decoration: none;
-    color: #f66;
-  }
-  li {
-    line-height: 1.5em;
-    margin-bottom: 20px;
-  }
-  .author, .date {
-    font-weight: bold;
-  }
+
 </style>

reactivity/src/Hash.js

@@ -0,0 +1,11 @@
+import {reactive} from "@vue/reactivity";
+
+
+export default function HTTPRequest(){
+    let data = reactive({});
+    data.value = document.location.hash;
+    window.addEventListener("hashchange", (v1, v2) => {
+        data.value = document.location.hash
+    })
+    return data;
+}

reactivity/src/List.vue

@@ -8,6 +8,7 @@
 
 let component = {
   components: {
+    
   },
   props: [
     "list"

reactivity/src/main.js

@@ -1,7 +1,7 @@
 import { createApp } from '@vue/runtime-dom';
 //import { createApp } from './ThreeRender';
 
-import App from "./Fragment.vue";
+import App from "./App.vue";
 
 //import "./vanilla-main";