vue路由-1.0

Others

发布于 2017-06-19 20:04:24 3046 次浏览

vue1.0的路由配置：

vue1.0.28,vue-router 0.7.13

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="dist/vue.min.js"></script>
     <script src="dist/vue-router.min.js"></script>
</head>
<body>
   <div id="box">
       <ul>
           <li>
               <a v-link="{path:'/home'}">主页</a>
           </li>
           <li>
                 <a v-link="{path:'/news'}">新闻</a>
           </li>
       </ul>

<div>
        <router-view></router-view>
</div>
   </div>
   </body>
   <script>
   var App=Vue.extend();
   var Home=Vue.extend({
       template:"<h3>我是主页</h3>"
   })
    var News=Vue.extend({
       template:"<h3>我是新闻</h3>"
   })
   var router=new VueRouter();
   router.map({
          "home":{
           component:Home
       },
       "news":{
           component:News
       }
   } );
   router.start(App,"#box");

   </script>
</html>