1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>hello world</title>
6 </head>
7 <body>
8 <div id="app">
9 <div>
10 <!-- 4、<router-link>默认会被渲染成一个 `<a>` 标签 ,to指令跳转到指定路径 -->
11 <router-link to="/home">Go to Home</router-link>
12 <router-link to="/about">Go to About</router-link>
13 </div>
14
15 <!-- 5、在页面上使用<router-view></router-view>标签，用于渲染匹配的组件 -->
16 <router-view></router-view>
17 </div>
18
19 <!-- 0、引入依赖库（类库需要下载） -->
20 <script src="vue.min.js"></script>
21 <script src="vue-router.js"></script>
22
23 <script type="text/javascript">
24 /* 1、创建组件 */
25 const Home = Vue.extend({
26 template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
27 data: function() {
28 return {
29 msg: 'Hello, vue router!'
30 }
31 }
32 });
33 const About = Vue.extend({
34 template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
35 });
36
37 // 2. 创建 router 实例，然后传 `routes`路由映射 配置
38 const router = new VueRouter({
39 routes: [
40 { path: '/home', component: Home },
41 { path: '/about', component: About },
42 { path: '/', component: Home } //设置默认路径
43 ]}
44 );
45
46 // 3. 创建和挂载根实例。记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能
47 const vm = new Vue({
48 router: router
49 }).$mount('#app');
50
51 // 现在，应用已经启动了！
52 </script>
53 </body>
54 </html>
