建立一個基礎路由器組件
我們起首建立用於路由的兩個頁面Home.vue和List.vue用於路由的兩個頁面
Home.vue
<template>
<div>home</div>
</template>
List.vue
<template>
<div>list</div>
</template>
定義路由和襯着路由
我們先來建立一個AppRouter.vue文件,它將成為路由器組件自身,並具有路由的定義
<template>
<component :is="routedComponent"></component>
</template>
<script>
import Home from "./Home.vue";
import List from "./List.vue";
const routes = {
"/": Home,
"/list": List
};
export default {
data() {
return {
current: window.location.pathname
};
},
computed: {
routedComponent() {
return routes[this.current];
}
}
};
</script>
這裏我們採納component 來動態襯着差別的路由組件
運用路由
我們看下app設置路由的運用
<template>
<div>
<button @click="goto('/')">go TO home</button>
<button @click="goto('/list')">go TO List</button>
<app-router></app-router>
</div>
</template>
<script>
import AppRouter from "./components/AppRouter";
export default {
components: {
AppRouter
},
methods: {
goto(router) {
window.location.pathname = router;
}
}
};
</script>
一個簡樸的路由組器就完成了。
https://codesandbox.io/s/jjv1…
上述demo在這裡能夠看到。
上述路由還有點小問題,就是會革新頁面,下一篇來討論下怎樣完成不革新頁面的路由器。
感謝