Vue單頁應用的跳轉(zhuǎn)，大部分使用Vue-router忿薇。要理解Vue-router的原理弦追，首先要會Vue自帶的<component>元素岳链。
<component>的用法很簡單，只要對其 is 特性進行動態(tài)綁定骗卜，<component>動態(tài)切換成多個組件宠页。
下面我們來實現(xiàn)這樣一個功能：
結(jié)構(gòu).PNG
核心的東西是兩個頁面根據(jù)實際相互跳轉(zhuǎn)，而且不需要刷新頁面寇仓。
管理頁面的框架举户，前面已經(jīng)實現(xiàn)，下面實現(xiàn)一個登錄頁面框架遍烦。
在components目錄下新建Login.vue俭嘁。
為了說清楚事情，只實現(xiàn)一個按鈕
<template>
<div class="login">
<div><el-button type="primary" @click="submit">登錄</el-button></div>
</div>
</template>
<script>
export default {
methods: {
submit() {
// 向上級組件發(fā)送一個redirec事件服猪，事件參數(shù)為'/index.json'
this.$emit('redirect', '/index.json');
},
},
};
</script>
<style scoped>
.login {
display: flex;
flex: 1;
background-color: dimgrey;
}
</style>
Admin組件也相應的修改下
<el-header height="80px"><el-button type="primary" @click="submit">退出</el-button></el-header>
<script>
export default {
name: 'App',
methods: {
submit() {
// 向上級組件發(fā)送一個redirec事件供填，事件參數(shù)為'/login.json'
this.$emit('redirect', '/login.json');
},
},
};
</script>
修改App.vue:
<template>
<div id="app">
<component :config="view" v-bind:is="view.name" @redirect="onRedirect"/>
<trace :information="trace"/>
</div>
</template>
<script>
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) => {
// 捕獲調(diào)試信息
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(() => {});
},
},
};
</script>
修改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) {
頁面跳轉(zhuǎn).PNG
現(xiàn)在罢猪，npm run dev看看效果吧近她！
