wangtao
/
uskyq


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
							<!DOCTYPE html>
<html>
 
  <head>
    <meta charset="utf-8" />
    <title>快速入门</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.5.2/dist/vue-router.js"></script>
  </head>
 
  <body>
    <div id="app">
      <div class="sidebar">
        <router-link to="/menu1">首页</router-link>
        <router-link to="/menu2">关于我们</router-link>
        <router-link to="/menu3">新闻动态</router-link>
      </div>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </body>
 
  <script>
    // 定义组件
    const Menu1 = { 
        template: '<div>首页的内容：<p>{{ customContent }}</p></div>', 
        data () { 
            return { customContent: "这是首页的自定义内容" } 
        } 
    };
    const Menu2 = { template: '<div>关于我们的内容：<p>{{ customContent }}</p></div>', data () { return { customContent: "这是关于我们的自定义内容" } } };
    const Menu3 = { template: '<div>新闻动态的内容：<p>{{ customContent }}</p></div>', data () { return { customContent: "这是新闻动态的自定义内容" } } };
 
    // 创建路由实例
    const router = new VueRouter({
      routes: [
        { path: '/menu1', component: Menu1 },
        { path: '/menu2', component: Menu2 },
        { path: '/menu3', component: Menu3 }
      ]
    });
 
    // 创建Vue实例，并将路由实例注入
    new Vue({
      el: "#app",
      router
    });
  </script>
 
</html>