【金秋打卡】第14天-vue3.0实现todolist

2022/11/9 4:24:06

本文主要是介绍【金秋打卡】第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

第四模块

学习截图
图片描述
图片描述



这篇关于【金秋打卡】第14天-vue3.0实现todolist的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程