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

参考资料

• 参考文档
• 参考视频
• Vue3.0官方文档查看文档

Vue3.0 项目常用依赖配置——安装路由

参考文章 https://blog.csdn.net/Jie_1997/article/details/118728628

在views下新建一个组件 About.vue

代码语言：javascript复制

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

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

<style scoped></style>

app.vue

代码语言：javascript复制

<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>

1:安装依赖

代码语言：javascript复制

npm install vue-router@next --save

安装成功之后 打开package.json文件可以看到路由安装成功的版本 "vue-router": "^4.0.13",

2：src 文件夹下创建 router 文件夹，router 文件夹下创建 index.js 文件 配置 router.js 文件

代码语言：javascript复制

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;

3：main.js 中引用

代码语言：javascript复制

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");

4:访问 首页

about页面

javascript vue.js

0 人点赞