Vue单页应用的跳转,大部分使用Vue-router。要理解Vue-router的原理,首先要会Vue自带的元素。
的用法很简单,只要对其 is 特性进行动态绑定,动态切换成多个组件。
下面我们来实现这样一个功能:
结构.PNG
核心的东西是两个页面根据实际相互跳转,而且不需要刷新页面。
管理页面的框架,前面已经实现,下面实现一个登录页面框架。
在components目录下新建Login.vue。
为了说清楚事情,只实现一个按钮
export default {
methods: {
submit() {
// 向上级组件发送一个redirec事件,事件参数为'/index.json'
this.$emit('redirect', '/index.json');
},
},
};
.login {
display: flex;
flex: 1;
background-color: dimgrey;
}
Admin组件也相应的修改下
退出
export default {
name: 'App',
methods: {
submit() {
// 向上级组件发送一个redirec事件,事件参数为'/login.json'
this.$emit('redirect', '/login.json');
},
},
};
修改App.vue:
import Admin from './components/Admin';
import Trace from './components/Trace';
import Login from './components/Login';
export default {
name: 'App',
data() {
return {
trace: {
rows: [],
},
view: {
},
};
},
created() {
this.$addReceiver((data) => {
// 捕获调试信息
if (data.trace) this.trace = data.trace;
});
this.$nextTick(() => {
this.onRedirect();
});
},
components: {
Admin,
Trace,
Login,
},
methods: {
onRedirect(url, value = null) {
return this.$httpGet(url, value).then((response) => {
this.view = response.view;
throw new Error('route');
}).catch(() => {});
},
},
};
修改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看看效果吧!