【金秋打卡】第14天-vue3.0实现todolist@慕课网原创_慕课网

第一模块

课程名称：vue3.0实现todolist

章节名称：

4-11 介绍路由router

讲师姓名：五月的夏天

第二模块

课程内容(概述)

1、讲解路由是什么？路由是一个容器

2、讲解如何编写路由配置

第三模块

介绍

vue-router是官方的路由插件，可让构建单页面应用变得易如反掌。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来；在vue-router单页面应用中，可用路径之间的切换来实现页面切换和跳转。

安装

在项目下执行以下代码安装Vue-Router

npm install vue-router --save

配置路由

在项目下新建router目录，然后在router目录再新建index.js文件，并添加以下代码

import { createWebHistory, createRouter } from "vue-router";
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About,
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

在在 main.js 引入Router引入

import { createApp } from 'vue'
import router from './router'
import App from './App.vue'
createApp(App).use(router).mount('#app')

配置说明

Router主要参数

path 路由分配的 URL
name 当路由指向此页面时显示的名字
component 路由调用这个页面时加载的组件名

history 模式和 hash 模式的区别

hash 模式：把前端路由路径用 # 号拼接在真实 URL 后面的模式。当 # 后面的路径发生变化时，浏览器不会重新发起请求，而是出发 hashchange 事件。hash 模式链接样式：http://localhost:8080/#/home
history 模式：history API 是 HTML5 的新特性，允许开发者直接更改前端路由。history 模式链接样式：http://localhost:8080/home

第四模块

学习截图