Vue路由基础应用：创建您自己的 Vue.js 路由器

也许您已经在前端世界中使用路由器有一段时间了，但是...您自己编写过路由器吗？你知道路由器的基础吗？看起来它似乎可以正常工作，但在幕后，路由器必须处理几件事。

路由器是负责路由的组件。我们可以将路由定义为找到到达多个目的地的路径的动作。这适用于不同的领域。

例如，如果您按下带有数字 5 的按钮，电梯的路由器将带您到五楼。

在Web开发中，我们可以看到路由的两个主要领域：

• 后端：路由器调用正确的控制器，匹配 url 模式。

• 前端：路由器将相应的组件加载到视图中，匹配 url 模式。

在本系列中，我们将了解如何使用 Vue.js 创建自己的前端路由器，以了解路由器的机制。

创建基本路由器组件

我们首先创建用于路由的组件Home和Articles 。内容并不重要，因为只是为了显示该路线上的某些内容，如下所示就足够了：

<!-- Home.vue -->
<template>
  <div>Home</div>
</template>

<!-- Articles.vue -->
<template>
  <div>Articles</div>
</template>

由于 Vue.js 是一个基于组件的框架，因此创建路由器的一种简单方法是使用组件。这种方式更加通用，因为任何使用过任何基于组件的工具的前端开发人员都能够理解它。

定义路线

让我们首先创建一个应用程序路由器。vue文件将是 Router 组件本身，其中包含路由的定义：

<!-- Router.vue -->
<script>
  import HomePage from "./HomePage";
  import ArticlesPage from "./ArticlesPage";
  
  const routes = {
    "/": HomePage,
    "/articles": ArticlesPage
  };
  </script>

我正在导入主页和文章页面组件并创建一个对象，routes其中键是路由路径，值是组件本身。以这种方式访问路由既简单又快速，因为访问对象属性是直接操作，只需执行routes["/"].

如果您需要更多自定义，定义它们的其他方法是使用对象作为值：

const routes = {
  "/": {
    component: HomePage,
    default: true, // indicate if it's the default route
    name: "root"
  }
}

您也可以使用数组来完成此操作，就像vue-router一样。数组解决方案更灵活，但也更复杂，因为稍后您需要循环：

const routes = [
  {
    path: "/"
    component: HomePage
  }
}

// A simple way to get the component is using ES2015 array find method
const route = routes.find(route => route.path === "/");

渲染 Router 组件
一旦我们设置了路由，我们就需要一种在给定条件下渲染组件的方法。Vue.js 模板为我们提供了动态组件，非常适合我们的案例。

<component>动态组件允许我们通过使用特殊元素、使用is属性作为条件来轻松地在组件之间进行热交换：

<template>
  <component :is="routedComponent"></component>
</template>

然后我们需要实现这个条件。由于该条件会根据路线而变化，因此计算属性非常适合此目的：

export default {
  data() {
    return { current: window.location.pathname };
  },
  computed: {
    routedComponent() {
      return routes[this.current];
    }
  }
};

计算属性将是返回默认路由（不匹配任何路由的路由）的组件的好地方，并且它就像使用 OR 运算符一样简单：

routedComponent() {
  return routes[this.current] || DefaultComponent;
}

最终的Router.vue组件是：

<!-- Router.vue -->
<template>
  <component :is="routedComponent"></component>
</template>

<script>
import HomePage from "./HomePage";
import ArticlesPage from "./ArticlesPage";

const routes = {
  "/": HomePage,
  "/articles": ArticlesPage
};

export default {
  data() {
    return { current: window.location.pathname };
  },
  computed: {
    routedComponent() {
      return routes[this.current];
    }
  }
};
</script>

作为替代解决方案，渲染函数（或 JSX）非常适合这种情况，因为默认情况下使用渲染函数进行渲染是动态的。因此，您可以在Router.js文件中重写该组件：

// Router.js
import HomePage from "./HomePage";
import ArticlesPage from "./ArticlesPage";

const routes = {
  "/": HomePage,
  "/articles": ArticlesPage
};

export default {
  data() {
    return { current: window.location.pathname };
  },
  computed: {
    routedComponent() {
      return routes[this.current];
    }
  },
  render(createElement) {
    return createElement(this.routedComponent);
  }
};

使用路由器组件

让我们创建一个App.vue组件作为应用程序的根组件。然后导入并注册router组件：

<!-- App.vue -->
<template>
  <div>
    <app-router></app-router>
  </div>
</template>

<script>
import AppRouter from "./AppRouter";

export default {
  components: {
    AppRouter
  }
};
</script>

在模板中，我们放置<app-router>将被路由器渲染的组件替换的标签。在脚本部分，导入 Router 并将其添加到 App 组件中。

如果您运行该应用程序并/通过/articles在浏览器栏中写入路由来进行导航，您应该会看到路由器加载相应的组件及其内容。

为了使它更方便，让我们添加几个按钮和一个方法来在App.vue中的路由之间导航：

<!-- App.vue -->
<template>
  <div>
    <button @click="goTo('/articles')">Go to Articles</button>
    <button @click="goTo('/')">Go to Home</button>
    <app-router></app-router>
  </div>
</template>

<script>
import AppRouter from "./AppRouter";

export default {
  components: {
    AppRouter
  },
  methods: {
    goTo(route) {
      window.location = route;
    }
  }
};
</script>

再试一次并单击按钮，它应该仍然以相同的方式工作。在这里找到本文中的
代码和演示并亲自尝试一下！