一步一步建立你本身的Vue路由器

2023年2月22日 287次阅读 来源: 小溪流

建立一個基礎路由器組件

我們起首建立用於路由的兩個頁面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在這裡能夠看到。

上述路由還有點小問題，就是會革新頁面，下一篇來討論下怎樣完成不革新頁面的路由器。

感謝

    原文作者：小溪流
    原文地址: https://segmentfault.com/a/1190000014712423
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞