页面跳转----基于Vue和PHP打造前后端分离的通用管理系统（六）

Vue单页应用的跳转，大部分使用Vue-router。要理解Vue-router的原理，首先要会Vue自带的元素。
的用法很简单，只要对其 is 特性进行动态绑定，动态切换成多个组件。
下面我们来实现这样一个功能：

结构.PNG

核心的东西是两个页面根据实际相互跳转，而且不需要刷新页面。
管理页面的框架，前面已经实现，下面实现一个登录页面框架。
在components目录下新建Login.vue。
为了说清楚事情，只实现一个按钮

Admin组件也相应的修改下

退出

修改App.vue:

修改main.js

import Http from './Util/Http';

window.host = '/';
window.index = 'index.json';
// import必须置顶，require就未必了
require('./api/mock');

Vue.createUrl = url => (url || window.host + window.index);

Vue.config.productionTip = false;

前面Http.js有个小修改

  static HttpSend = (url, value = null, post = false) => {
    const option = {
      method: post ? 'post' : 'get',
      // 这里原来用的this......
      url: Http.createUrl(url),
    };
    if (post) {

页面跳转.PNG

现在，npm run dev看看效果吧！