js实现简易版vue router

要实现一个简易版的Vue Router，你可以按照以下步骤进行：

1. 创建一个路由器对象，用于管理路由配置和处理路由导航。
2. 在路由器对象中定义一个路由表，用于映射路径和对应的组件。
3. 创建一个路由视图组件，用于根据当前路径渲染对应的组件。
4. 在应用程序中使用 <router-view> 组件来展示路由视图。
5. 使用 <router-link> 组件来创建导航链接，并通过路由器对象的 push 方法进行导航。

下面是一个示例代码：

javascriptCopy Code
// 创建路由器对象
const router = {
  routes: [],

  // 注册路由配置
  addRoute(path, component) {
    this.routes.push({ path, component });
  },

  // 导航到指定路径
  push(path) {
    const route = this.routes.find((r) => r.path === path);
    if (route) {
      this.currentRoute = route;
    } else {
      console.error('Route not found:', path);
    }
  }
};

// 创建路由视图组件
function RouterView() {
  return {
    render: () => {
      if (router.currentRoute) {
        return router.currentRoute.component;
      } else {
        return '404 - Not Found';
      }
    }
  };
}

// 创建导航链接组件
function RouterLink({ to, text }) {
  return {
    render: () => `<a href="#${to}" onclick="event.preventDefault(); router.push('${to}');">${text}</a>`
  };
}

// 示例组件 A
const componentA = {
  render: () => 'Component A'
};

// 示例组件 B
const componentB = {
  render: () => 'Component B'
};

// 注册路由配置
router.addRoute('/a', componentA);
router.addRoute('/b', componentB);

// 在应用程序中使用路由视图和导航链接
function App() {
  return {
    render: () => `
      <div>
        ${RouterLink({ to: '/a', text: 'Component A' }).render()}
        ${RouterLink({ to: '/b', text: 'Component B' }).render()}
      </div>
      <div>${RouterView().render()}</div>
    `
  };
}

// 在根元素中渲染应用程序
const root = document.getElementById('root');
root.innerHTML = App().render();

在上述示例中，我们首先创建了一个路由器对象 router，其中包含了路由配置和导航方法。然后，我们定义了两个示例组件 A 和 B，并使用 addRoute 方法将它们注册到路由器对象的路由表中。

接下来，我们创建了路由视图组件 RouterView，用于根据当前路径渲染对应的组件。在 render 方法中，我们通过 router.currentRoute 来获取当前路径对应的组件。

然后，我们创建了导航链接组件 RouterLink，用于创建带有点击事件的导航链接。在 render 方法中，我们生成一个 <a> 标签，并为其绑定点击事件来触发路由器对象的 push 方法进行导航。

最后，我们在应用程序的根元素中渲染了应用程序组件 App，其中包含了导航链接和路由视图。

render函数的实现

要在JavaScript中实现一个简单的render()函数，你可以使用模板字符串和对象等语法来构建HTML代码。

下面是一个示例的render()函数的实现：

javascriptCopy Code
function render(tagName, attributes = {}, children = '') {
  const attributeString = Object.entries(attributes)
    .map(([key, value]) => `${key}="${value}"`)
    .join(' ');

  return `<${tagName} ${attributeString}>${children}</${tagName}>`;
}

// 示例用法
const attributes = {
  id: 'myElement',
  class: 'container'
};

const children = 'Hello, World!';

const element = render('div', attributes, children);
console.log(element);

上述代码中的render()函数接受三个参数：tagName（字符串，代表HTML标签名），attributes（对象，包含HTML属性），children（字符串，表示标签内的文本或其他HTML元素）。

该函数首先使用Object.entries(attributes)将属性对象转换为键值对数组，然后通过map()和join()方法将键值对数组转换为字符串形式的属性列表。

接下来，函数使用模板字符串构建HTML标签，并将标签名、属性列表和子元素合并。

最后，示例代码中演示了如何使用render()函数来创建一个<div>元素，并设置该元素的id属性为"myElement"，class属性为"container"，并将文本子元素设置为"Hello, World!"。最终生成的HTML代码将被打印到控制台。