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: '<div><h1>Home</h1><p>{{msg}}</p></div>'
})

var About = Vue.extend({
	template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
})
           

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");
           

最後

實作效果

目前位址