一步一步创建你自己的Vue路由器

2024年3月1日 238次阅读 来源: 小溪流

创建一个基本路由器组件

我们首先创建用于路由的两个页面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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞