Vue.js+Vue-router.js实现单页面路由跳转spa（不使用vue脚手架）

Vue.js+Vue-router.js实现单页面路由跳转（不使用vue脚手架

前言

最近在做一个商城项目，想实现单页面路由的跳转，个人中心，侧边栏点击不同名称的跳转不同界面，但是主页面不变，借鉴了他人的项目，实现了此功能。

---

一、文件引入

实现此功能使用的是vue1.x.js和 vue-router v0.7.13.js我尝试换成更高的版本但是会报出错误，所以暂时旧版本实现。

Gitee仓库地址
阿里网盘

    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>

二、两种不同形式

1、直接在变量内部构造组件

网上的视频讲解，大多是通过变量内部定义的方式，实现功能，但是不太适用

var Home = Vue.extend({
	template: '
Home
{{msg}}
'
})

var About = Vue.extend({
	template: '
About
This is the tutorial about vue-router.
'
})

2、在外部构造组件

1）组件模板

    <template id="index">
      <div>我是首页</div>
    </template>

2）构造组件

      var Index = Vue.extend({
        template: "#index",
      });

HTMl部分代码

        <div class="info" id="app">
          <div class="info_left">
            <div class="info_account">
              <div class="account_th well">账号管理</div>
              <ul class="list">
                <li v-link="{path:'/index'}" class="active">
                  <a>个人中心</a>
                </li>
                <li v-link="{path:'/message'}">
                  <a>消息通知</a>
                </li>
                <li v-link="{path:'/account'}">
                  <a>账号信息</a>
                </li>
                <li v-link="{path:'/address'}">
                  <a>地址管理</a>
                </li>
              </ul>
            </div>
            <div class="info_trading"></div>
          </div>
          <div class="info_right">
          	//占位
            <router-view></router-view>
          </div>
        </div>

js配置地址代码

      var Index = Vue.extend({
        template: "#index",
      });
      var Message = Vue.extend({
        template: "#message",
      });
      var Account = Vue.extend({
        template: "#account",
      });
      var Address = Vue.extend({
        template: "#address",
      });

      var router = new VueRouter();
      router.redirect({
        "/": "/index",
      });
      router.map({
        "/index": {
          component: Index,
        },
        "/message": {
          component: Message,
        },
        "/account": {
          component: Account,
        },
        "/address": {
          component: Address,
        },
      });
      var App = Vue.extend({});
      router.start(App, "#app");

最后

实现效果

当前地址