diff --git a/index.html b/index.html
index 5b51773..b1bfc7f 100644
--- a/index.html
+++ b/index.html
@@ -18,102 +18,8 @@
     </head>
     <body id="page-top">
 
-
-
         <div id='main'>
-        <!-- Navigation-->
-        <nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
-            <div class="container">
-                <a class="navbar-brand js-scroll-trigger" href="#page-top">暨大排課表</a>
-                <button class="navbar-toggler navbar-toggler-right text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
-                    Menu
-                    <i class="fas fa-bars"></i>
-                </button>
-                <div class="collapse navbar-collapse" id="navbarResponsive">
-                    <ul class="navbar-nav ml-auto">
-                        <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="https://github.com/snsd0805/NCNU_Course">Github</a></li>
-                        
-                        <li v-if="token==''" class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href='#' v-on:click="login()">Facebook登入</a></li>
-                        <li v-if="token!=''" class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#" v-on:click="logout()">登出Facebook—{{user}}</a></li>
-
-                    </ul>
-                </div>
-            </div>
-        </nav>
-        <br><br>
-        <!-- Portfolio Section-->
-        <section class="page-section portfolio" id="portfolio">
-            <div class="container" id='table'>
-                <!-- Portfolio Section Heading-->
-                <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">課表</h2>
-                <!-- Icon Divider-->
-                <div class="divider-custom">
-                    <div class="divider-custom-line"></div>
-                    <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
-                    <div class="divider-custom-line"></div>
-                </div>
-                <div class="divider-custom">
-                    <div v-if="token!=''"><button class="btn btn-info" @click="saveCourseTable()">儲存</button></div>
-                    <div v-if="token==''"><button class="btn btn-info" @click="saveCourseTable()">儲存(必須登入Facebook帳號)</button></div>
-                </div>
-                <div class="row">
-                    <div class="col-lg-3">
-                        <div class="row">
-                            <choose-department 
-                                v-bind:departments="departments"
-                                v-bind:selected="selectDepartment"
-                                v-on:selectok="select"
-                                v-on:foundedok="founded"
-                            >
-                            </choose-department><br>
-                        </div><br><br>
-                        <div class="row">
-                            <course-anslist
-                                v-bind:courses="courses"
-                                v-bind:selected_d="selectDepartment"
-                                v-bind:selected_c="selectCourses"
-                                v-bind:find_name="foundName"
-                                v-on:add-course="addCourse"
-                                v-on:show-temp="saveTemp"
-                                v-on:delete-temp="deleteTemp"
-                            >
-                            </course-anslist>
-                        </div><br><br>
-                    </div>
-
-                    <div class="col-lg-9 table-responsive " >
-                        <course-table
-                            v-bind:selectCourses="selectCourses"
-                            v-bind:select_c="selectCourses"
-                            v-on:remove-course="removeCourse"
-                        ></course-table>
-                    </div>
-                </div>
-                <!-- Portfolio Grid Items-->
-            </div>
-        </section>
-
-
-        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-            <div class="modal-dialog">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <h5 class="modal-title" id="exampleModalLabel">資訊公告</h5>
-                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                            <span aria-hidden="true">×</span>
-                        </button>
-                    </div>
-                    <div class="modal-body">
-                        已經更新為 1092 新課表<br>
-                        但因學校未更新通識課資料，因此還沒有「通識課程分類」<br><br>
-                        2021 01/14 更新
-                    </div>
-                    <div class="modal-footer">
-                        <button type="button" class="btn btn-secondary" data-dismiss="modal">我知道了</button>
-                    </div>
-                </div>
-            </div>
-        </div>
+            <router-view></router-view>
         </div>
 
         
@@ -131,12 +37,14 @@
         <script src="assets/mail/jqBootstrapValidation.js"></script>
         <script src="assets/mail/contact_me.js"></script>
         <!-- Core me JS-->
+        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
         <script src="js/scripts.js"></script>
         <script src='js/vue.js'></script>
         <script src="https://unpkg.com/axios/dist/axios.min.js"></script>        
         <script src="js/components/table.vue"></script>        
         <script src="js/components/chooseDepartment.vue"></script>        
         <script src="js/components/coursesList.vue"></script>        
+        <script src="js/components/main.vue"></script>        
         <script src="js/index.vue"></script>
         <script>
             $(window).ready(() => {
diff --git a/js/components/main.vue b/js/components/main.vue
new file mode 100644
index 0000000..0cb6875
--- /dev/null
+++ b/js/components/main.vue
@@ -0,0 +1,289 @@
+var mainWindow = {
+    data: function(){
+        return {
+            'courses': [],
+            'selectCourses': [],
+            'departments': [],
+            'selectDepartment': '',
+            'foundName': "",
+            "user": "",
+            'token': ""
+        }
+    },
+    created() {
+        var main = this
+        window.fbAsyncInit = function() {
+            FB.init({
+                appId      : '',
+                cookie     : true,
+                xfbml      : true,
+                version    : 'v9.0'
+            });
+                
+            FB.AppEvents.logPageView();
+            main.getCourseTable()
+        };
+      
+        (function(d, s, id){
+           var js, fjs = d.getElementsByTagName(s)[0];
+           if (d.getElementById(id)) {return;}
+           js = d.createElement(s); js.id = id;
+           js.src = "https://connect.facebook.net/en_US/sdk.js";
+           fjs.parentNode.insertBefore(js, fjs);
+        }(document, 'script', 'facebook-jssdk'));
+    },
+    mounted() {
+        var main = this
+        axios
+            .get("./output.json")
+            .then(response => (main.courses = response.data))
+            .then(function(){
+                for(var course of main.courses){
+                    // console.log(course.name)
+                    if(main.departments.indexOf(course.department)==-1){
+                        main.departments.push(course.department)
+                    }
+                }
+            })
+            .then(function(){
+                main.departments.sort()
+                main.selectDepartment = main.departments[15]
+            })
+    },
+    methods: {
+        'login': function(){
+            var main = this
+            FB.login(function(){
+                main.getCourseTable()
+            })
+        },
+        'logout': function(){
+            var main = this
+            FB.logout(function(response) {
+                main.user = ""
+                main.token = ""
+            });
+        },
+        'getCourseTable': function(){
+            var main = this
+            FB.getLoginStatus(function(response) {
+                main.statusChangeCallback(response);
+            });
+        },
+        'statusChangeCallback': function(response){
+            if(response.status == "connected"){
+                this.token = response.authResponse.accessToken
+
+                var main = this
+                FB.api('/me', function(response){main.user = response.name})
+
+                fetch('https://api.snsd0805.com/courseTable?token='+this.token)
+                    .then(function(response){
+                        return response.json()
+                    }).then(function(jsonData){
+                        console.log(jsonData)
+                        main.selectCourses = JSON.parse(jsonData['data'])
+                    })
+                    .catch(function(err){
+                        alert("錯誤： "+err)
+                    })
+            }
+        },
+        'saveCourseTable': function(){
+            var main = this
+            if(this.token!=""){
+                fetch('https://api.snsd0805.com/courseTable',{
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        'token': main.token,
+                        'data': main.selectCourses
+                    })
+                })
+                    .then(function(response){
+                        return response.json()
+                    })
+                    .then(function(response){
+                        if(response.status=="saved"){
+                            alert("已儲存")
+                        }else{
+                            alert("錯誤")
+                        }
+                    })
+                    .catch(function(err){
+                        alert("錯誤： "+err)
+                    })
+
+            }else{
+                this.login()
+            }
+        },
+        'getTime': function(timeString){
+            ans = []
+            number = ""
+            for(var i of timeString){
+                if(i>="0" && i<="9"){
+                    number = i
+                }else if(i>="a" && i<="z"){
+                    ans.push(number+i)
+                }
+                else{
+                    ans.push(timeString)
+                    break
+                }
+            }
+            return ans
+        },
+        'select': function(department){
+            this.selectDepartment = department
+        },
+        'founded': function(courseName){
+            this.foundName = courseName
+        },
+        'addCourse': function(course){
+            var time = this.getTime(course.time)
+            for(var t of time){
+                this.selectCourses.push({
+                    'time': t,
+                    'name': course.name,
+                    'temp': false
+                })
+            }
+        },
+        'removeCourse': function(course){
+            console.log("remove "+course)
+            for(var i=this.selectCourses.length-1;i>=0;i--){
+                if(this.selectCourses[i].name == course){
+                    this.selectCourses.splice(i, 1)
+                }
+            }
+        },
+        'saveTemp': function(course){
+            if(course==null){
+            }else{
+                this.tempCourse = []
+                var time = this.getTime(course.time)
+                for(var t of time){
+                    this.selectCourses.push({
+                        'time': t,
+                        'name': course.name,
+                        'temp': true
+                    })
+                }
+            }
+        },
+        'deleteTemp': function(course){
+            for(var i=this.selectCourses.length-1;i>=0;i--){
+                if(this.selectCourses[i].name == course.name && this.selectCourses[i].temp == true){
+                    this.selectCourses.splice(i, 1)
+                }
+            }
+        },
+    },
+    components: {
+        'course-table': courseTable,
+        'choose-department': chooseDepartment,
+        'course-anslist': coursesList
+    },
+    template: `
+    <div>
+<!-- Navigation-->
+<nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
+    <div class="container">
+        <a class="navbar-brand js-scroll-trigger" href="#page-top">暨大排課表</a>
+        <button class="navbar-toggler navbar-toggler-right text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
+            Menu
+            <i class="fas fa-bars"></i>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarResponsive">
+            <ul class="navbar-nav ml-auto">
+                <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="https://github.com/snsd0805/NCNU_Course">Github</a></li>
+                
+                <li v-if="token==''" class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href='#' v-on:click="login()">Facebook登入</a></li>
+                <li v-if="token!=''" class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#" v-on:click="logout()">登出Facebook—{{user}}</a></li>
+
+            </ul>
+        </div>
+    </div>
+</nav>
+<br><br>
+
+
+<section class="page-section portfolio" id="portfolio">
+    <div class="container" id='table'>
+        <!-- Portfolio Section Heading-->
+        <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">課表</h2>
+        <!-- Icon Divider-->
+        <div class="divider-custom">
+            <div class="divider-custom-line"></div>
+            <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
+            <div class="divider-custom-line"></div>
+        </div>
+        <div class="divider-custom">
+            <div v-if="token!=''"><button class="btn btn-info" @click="saveCourseTable()">儲存</button></div>
+            <div v-if="token==''"><button class="btn btn-info" @click="saveCourseTable()">儲存(必須登入Facebook帳號)</button></div>
+        </div>
+        <div class="row">
+            <div class="col-lg-3">
+                <div class="row">
+                    <choose-department 
+                        v-bind:departments="departments"
+                        v-bind:selected="selectDepartment"
+                        v-on:selectok="select"
+                        v-on:foundedok="founded"
+                    >
+                    </choose-department><br>
+                </div><br><br>
+                <div class="row">
+                    <course-anslist
+                        v-bind:courses="courses"
+                        v-bind:selected_d="selectDepartment"
+                        v-bind:selected_c="selectCourses"
+                        v-bind:find_name="foundName"
+                        v-on:add-course="addCourse"
+                        v-on:show-temp="saveTemp"
+                        v-on:delete-temp="deleteTemp"
+                    >
+                    </course-anslist>
+                </div><br><br>
+            </div>
+
+            <div class="col-lg-9 table-responsive " >
+                <course-table
+                    v-bind:selectCourses="selectCourses"
+                    v-bind:select_c="selectCourses"
+                    v-on:remove-course="removeCourse"
+                ></course-table>
+            </div>
+        </div>
+        <!-- Portfolio Grid Items-->
+    </div>
+</section>
+
+
+<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="exampleModalLabel">資訊公告</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">×</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                已經更新為 1092 新課表<br>
+                但因學校未更新通識課資料，因此還沒有「通識課程分類」<br><br>
+                2021 01/14 更新
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">我知道了</button>
+            </div>
+        </div>
+    </div>
+</div>
+</div>
+</div>
+    `
+}
\ No newline at end of file
diff --git a/js/index.vue b/js/index.vue
index bf0d402..8679b64 100644
--- a/js/index.vue
+++ b/js/index.vue
@@ -1,218 +1,14 @@
-var vm = new Vue({
-    el: "#main",
-    data: {
-        'courses': [],
-        'selectCourses': [],
-        'departments': [],
-        'selectDepartment': '',
-        'foundName': "",
-        "user": "",
-        'token': ""
-    },
-    created() {
-        window.fbAsyncInit = function() {
-            FB.init({
-                appId      : '',
-                cookie     : true,
-                xfbml      : true,
-                version    : 'v9.0'
-            });
-                
-            FB.AppEvents.logPageView();
-            vm.getCourseTable()
-        };
-      
-        (function(d, s, id){
-           var js, fjs = d.getElementsByTagName(s)[0];
-           if (d.getElementById(id)) {return;}
-           js = d.createElement(s); js.id = id;
-           js.src = "https://connect.facebook.net/en_US/sdk.js";
-           fjs.parentNode.insertBefore(js, fjs);
-        }(document, 'script', 'facebook-jssdk'));
-    },
-    mounted() {
-        axios
-            .get("./output.json")
-            .then(response => (vm.courses = response.data))
-            .then(function(){
-                for(var course of vm.courses){
-                    // console.log(course.name)
-                    if(vm.departments.indexOf(course.department)==-1){
-                        vm.departments.push(course.department)
-                    }
-                }
-            })
-            .then(function(){
-                vm.departments.sort()
-                vm.selectDepartment = vm.departments[15]
-            })
-    },
-    methods: {
-        'login': function(){
-            FB.login(function(){
-                vm.getCourseTable()
-            })
-        },
-        'logout': function(){
-            FB.logout(function(response) {
-                vm.user = ""
-                vm.token = ""
-            });
-        },
-        'getCourseTable': function(){
-            FB.getLoginStatus(function(response) {
-                vm.statusChangeCallback(response);
-            });
-        },
-        'statusChangeCallback': function(response){
-            if(response.status == "connected"){
-                this.token = response.authResponse.accessToken
+const Bar = { template: '<div>bar {{ $route.params.id }}</div>' }
 
-                FB.api('/me', function(response){vm.user = response.name})
-
-                fetch('https://api.snsd0805.com/courseTable?token='+this.token)
-                    .then(function(response){
-                        return response.json()
-                    }).then(function(jsonData){
-                        console.log(jsonData)
-                        vm.selectCourses = JSON.parse(jsonData['data'])
-                    })
-                    .catch(function(err){
-                        alert("錯誤： "+err)
-                    })
-            }
-        },
-        'saveCourseTable': function(){
-            if(this.token!=""){
-                fetch('https://api.snsd0805.com/courseTable',{
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        'token': vm.token,
-                        'data': vm.selectCourses
-                    })
-                })
-                    .then(function(response){
-                        return response.json()
-                    })
-                    .then(function(response){
-                        if(response.status=="saved"){
-                            alert("已儲存")
-                        }else{
-                            alert("錯誤")
-                        }
-                    })
-                    .catch(function(err){
-                        alert("錯誤： "+err)
-                    })
-
-            }else{
-                this.login()
-            }
-        },
-        'getTime': function(timeString){
-            ans = []
-            number = ""
-            for(var i of timeString){
-                if(i>="0" && i<="9"){
-                    number = i
-                }else if(i>="a" && i<="z"){
-                    ans.push(number+i)
-                }
-                else{
-                    ans.push(timeString)
-                    break
-                }
-            }
-            return ans
-        },
-        'select': function(department){
-            this.selectDepartment = department
-        },
-        'founded': function(courseName){
-            this.foundName = courseName
-        },
-        'addCourse': function(course){
-            var time = this.getTime(course.time)
-            for(var t of time){
-                this.selectCourses.push({
-                    'time': t,
-                    'name': course.name,
-                    'temp': false
-                })
-            }
-        },
-        'removeCourse': function(course){
-            console.log("remove "+course)
-            for(var i=this.selectCourses.length-1;i>=0;i--){
-                if(this.selectCourses[i].name == course){
-                    this.selectCourses.splice(i, 1)
-                }
-            }
-        },
-        'saveTemp': function(course){
-            if(course==null){
-            }else{
-                this.tempCourse = []
-                var time = this.getTime(course.time)
-                for(var t of time){
-                    this.selectCourses.push({
-                        'time': t,
-                        'name': course.name,
-                        'temp': true
-                    })
-                }
-            }
-        },
-        'deleteTemp': function(course){
-            for(var i=this.selectCourses.length-1;i>=0;i--){
-                if(this.selectCourses[i].name == course.name && this.selectCourses[i].temp == true){
-                    this.selectCourses.splice(i, 1)
-                }
-            }
-        },
-    },
-    components: {
-        'course-table': courseTable,
-        'choose-department': chooseDepartment,
-        'course-anslist': coursesList,
-        
-    }
+Vue.use(VueRouter)
+const router = new VueRouter({
+    routes: [
+        { path: '/', component: mainWindow },
+        { path: '/share/:id', component: Bar }
+    ]
 })
 
-
-
-
-
-// 'update': function(){
-//     this.tableBody = ""
-//     for(var hour=8;hour<=21;hour++){
-//         // console.log(hour)
-//         symbolIndex = (hour<12)?(hour-8):(hour-9)
-//         this.tableBody += "<tr>"
-//         if(hour==12){       //處理中午時段
-//             this.tableBody += "<th style='text-align: center;' scope='row'>"+hour+"~"+(hour+1)+"<br>z</th>"
-//             this.tableBody += "<td style='text-align: center; background-color: #1abc9c;' colspan='5'>中午休息時間</td>"
-
-//             continue
-//         }else{
-//             this.tableBody += "<th style='text-align: center;' scope='row'>"+hour+"~"+(hour+1)+"<br>"+String.fromCharCode(97+symbolIndex)+"</th>"
-//         }
-        
-//         for(var week=1;week<=5;week++){
-//             this.tableBody += "<td>"
-//             // console.log(symbolIndex)
-//             var course = this.exist(week+String.fromCharCode(97+symbolIndex))
-//             if(course){
-//                 this.tableBody += "<div style='border: 5px #1abc9c solid; text-align: center;'>"
-//                 // console.log(week+String.fromCharCode(97+(hour-8)))
-//                 this.tableBody += course.name+' <button type="button" v-on:click=\"$emit(\'remove\', course)\" class="btn btn-danger btn-sm">刪</button>'
-//             }
-//             this.tableBody += "</td>"
-//         }
-//         this.tableBody += "</tr>"
-//     }
-//     this.tableBody += "</tbody>"
-// }
\ No newline at end of file
+var vm = new Vue({
+    el: "#main",
+    router
+})
\ No newline at end of file
