159 Registering & Rendering Routes

完成下面步骤，可以实现地址栏输入相应URL显示相应组件

1、main.js中完成routes配置，并将router添加到全局

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';

import App from './App.vue';
import TeamsList from './components/teams/TeamsList.vue';
import UsersList from './components/users/UsersList.vue';

const router = createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/teams', component: TeamsList },
        { path: '/users', component: UsersList },
    ],
})

const app = createApp(App)

app.use(router);

app.mount('#app');

2、修改App.vue main标签中的组件为router-view

<template>
  <the-navigation @set-page="setActivePage"></the-navigation>
  <main>
    <!-- <component :is="activePage"></component> -->
     <router-view></router-view>
  </main>
</template>