Vue3.0实现todolist-逻辑实现 路由router

<template>
  <div>我是about界面</div>
</template>

<script>
export default {};
</script>

<style scoped></style>

<template>
  <router-view />
</template>

<script>
import HomeView from "./views/Home.vue";

export default {
  name: "App",
  components: {
    HomeView,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

npm install vue-router@next --save

import {
  createRouter,
  createWebHashHistory,
  createWebHistory,
} from "vue-router";

// 1. 定义路由组件， 注意，这里一定要使用 文件的全名（包含文件后缀名）
import Home from "../views/Home.vue";
import About from "../views/About.vue";

// 2. 定义路由配置
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    //component: About,
    //按需引入：把component写成箭头函数的形式，然后return通过import的方式引入组件的相对路径
    //如果没有访问这个路径，就不会加载这个组件，实际上为了节约性能
    component: () => import("../views/About.vue"),
  },
];

// 3. 创建路由实例
const router = createRouter({
  // 4. 采用hash 模式
  //  history: createWebHashHistory(),
  // 采用 history 模式
  history: createWebHistory(),
  routes, // short for `routes: routes`
});

export default router;

import { createApp } from "vue";
import App from "./App.vue";
import store from "./store";
import router from "./router";

const app = createApp(App);
app.use(store);
app.use(router);
app.mount("#app");