update

Former-commit-id: b5ac67524db28038a26994a1bbe683f845663126
6 years ago · 1aa43eab9f
parent 84447fe342
commit 1aa43eab9f
7 changed files with 79 additions and 1 deletions
--- a/projects/IoTCenter/wwwroot/test.c1.js
+++ b/projects/IoTCenter/wwwroot/test.c1.js
@ -0,0 +1,11 @@
+const Foo = Vue.component('page-about', {
+    template: '<div>foo {{count}}</div>',
+    data() {
+        return {
+            count: 123
+        };
+    },
+    created: function () {
+        alert('created');
+    }
+});
--- a/projects/IoTCenter/wwwroot/test.c2.js
+++ b/projects/IoTCenter/wwwroot/test.c2.js
@ -0,0 +1 @@
+const Bar = { template: '<div>bar</div>' }
--- a/projects/IoTCenter/wwwroot/test.html
+++ b/projects/IoTCenter/wwwroot/test.html
@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title></title>
+</head>
+<body>
+    <div id="app">
+        <h1>Hello App!</h1>
+        <p>
+            <!-- 使用 router-link 组件来导航. -->
+            <!-- 通过传入 `to` 属性指定链接. -->
+            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
+            <router-link to="/foo">Go to Foo</router-link>
+            <router-link to="/bar">Go to Bar</router-link>
+        </p>
+        <!-- 路由出口 -->
+        <!-- 路由匹配到的组件将渲染在这里 -->
+        <router-view></router-view>
+    </div>
+    <script type="text/javascript" src="lib/vue/vue.min.js"></script>
+    <script type="text/javascript" src="lib/vue-router/vue-router.min.js"></script>
+    <script type="text/javascript" src="test.c1.js"></script>
+    <script type="text/javascript" src="test.c2.js"></script>
+
+    <script>
+        // 1. 定义 (路由) 组件。
+        // 可以从其他文件 import 进来
+
+        
+        // 2. 定义路由
+        // 每个路由应该映射一个组件。 其中"component" 可以是
+        // 通过 Vue.extend() 创建的组件构造器，
+        // 或者，只是一个组件配置对象。
+        // 我们晚点再讨论嵌套路由。
+        const routes = [
+            { path: '/foo', component: Foo },
+            { path: '/bar', component: Bar }
+        ]
+
+        // 3. 创建 router 实例，然后传 `routes` 配置
+        // 你还可以传别的配置参数, 不过先这么简单着吧。
+        const router = new VueRouter({
+            routes // (缩写) 相当于 routes: routes
+        })
+
+        // 4. 创建和挂载根实例。
+        // 记得要通过 router 配置参数注入路由，
+        // 从而让整个应用都有路由功能
+        const app = new Vue({
+            router
+        }).$mount('#app')
+    </script>
+</body>
+</html>
--- a/projects/IoTClient/Assets/StreamingAssets/libman.json
+++ b/projects/IoTClient/Assets/StreamingAssets/libman.json
@ -70,6 +70,11 @@
      "destination": "wwwroot/lib/vue/",
      "files": [ "vue.min.js" ]
    },
+    {
+      "library": "../../../lib/node_modules/vue-router/dist/",
+      "destination": "wwwroot/lib/vue-router/",
+      "files": ["vue-router.min.js"]
+    },
    {
      "library": "../../../lib/node_modules/urijs/src/",
      "destination": "wwwroot/lib/urijs/",
--- a/projects/IoTClient/Assets/StreamingAssets/wwwroot/lib/vue-router/vue-router.min.js
+++ b/projects/IoTClient/Assets/StreamingAssets/wwwroot/lib/vue-router/vue-router.min.js
--- a/projects/lib/package.json
+++ b/projects/lib/package.json
@ -31,6 +31,7 @@
    "tree-multiselect": "2.6.1",
    "urijs": "1.19.2",
    "vue": "2.6.10",
+    "vue-router": "2.7.0",
    "metro4": "4.3.3",
    "toastr": "2.1.4"
  },
--- a/projects/projects.sln
+++ b/projects/projects.sln
@ -22,7 +22,6 @@ EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution Items", "{48C7AE84-0BDC-4F8A-89ED-C6B82EC46C9F}"
 	ProjectSection(SolutionItems) = preProject
 		lib\package.json = lib\package.json
-		README.md = README.md
 		..\README.md = ..\README.md
 	EndProjectSection
 	ProjectSection(FolderGlobals) = preProject