-
Notifications
You must be signed in to change notification settings - Fork 0
/
vue-router-hellow-world.html
102 lines (96 loc) · 4.04 KB
/
vue-router-hellow-world.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue router入門有感</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/obsidian.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<h1>Hello App!</h1>
<h2>Source code</h2>
<b>javascript</b>
<ol>
<li>0. 如果使用模組化機制编程，導入Vue和VueRouter，要呼叫 <code>Vue.use(VueRouter)</code><br />
<pre><code class="js">
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//your code
</code></pre></li>
<li>定義(要路由的)組件。可以import進來
<pre><code class="js">const Foo = { template: '< div>foo< /div>' }
const Bar = { template: '< div>bar< /div>' }</code></pre></li>
<li>定義路由，每一個路由應該對應到一個組件，<br />
其中<code>component</code>可以由<code>Vue.extend()</code>建構，<br />
或者是一個物件。<br />之後會再討論巢狀式路由
<pre><code class="js">const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]</code></pre></li>
<li>建立 router 實例，傳進 <code>routes</code> 配置參數。
<pre><code class="js">onst router = new VueRouter({
routes // （缩写）相当于 routes: routes
})</code></pre></li>
<li>建立Vue實例，傳進 <code>router</code> 配置參數，注入路由功能
<pre><code class="js">const app = new Vue({
router
}).$mount('#app')</code></pre></li>
</ol>
<b>HTML</b>
<p>使用 <code>router-link</code> 組件來渲染要route的連結<br />
傳入<code>to</code>指定連結(網址)，<code>router-link</code>最後會渲染成<code>a</code></p>
<pre><code class="html">< router-link to="/foo">Go to Foo< /router-link>
< router-link to="/bar">Go to Bar< /router-link></code></pre>
<p>使用<code>< router-view>< /router-view></code>，當作是路由指定渲染組件所顯示的地方。</p>
<pre><code class="html">< router-view>< /router-view></code></pre>
<h2>Demo</h2>
<div id="app" style="height: 60px">
<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">
// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 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>