vue路由设置

vue本身是不支持路由,想用的话就得引入一个模块
vue-router 路由模块

<script type="text/javascript" src="js/vue-router.js" ></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
      .v-link-active{
                        color:#ff0080;
                        font-size: 30px;
                     }
</style>

<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js" ></script>
<body>
<div id="box">
        <h1>vue路由</h1>
        <ul>
              <li><a v-link="{path:'/home'}">主页</a></li>
              <li><a v-link="{path:'/other'}">其他</a></li>
        </ul>
        <router-view></router-view>
</div>
</body>
</html>
<script>
        var Home=Vue.extend({
        template:'<h1>我是主页</h1>'
        });
        var Other=Vue.extend({
          template:'<h1>我是其他页面</h1>'
        });
        var App=Vue.extend();
        //路由
          var Router=new VueRouter();
            Router.map({
                  '/home':{
                      component:Home
                  },
                   '/other':{
                       component:Other
                  }
});
        //开启
        Router.start(App,'#box');
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容