【金秋打卡】第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
路由分配的 URLname
当路由指向此页面时显示的名字component
路由调用这个页面时加载的组件名
history
模式和 hash
模式的区别
- hash 模式:把前端路由路径用 # 号拼接在真实 URL 后面的模式。当 # 后面的路径发生变化时,浏览器不会重新发起请求,而是出发 hashchange 事件。hash 模式链接样式:
http://localhost:8080/#/home
- history 模式:history API 是 HTML5 的新特性,允许开发者直接更改前端路由。history 模式链接样式:
http://localhost:8080/home
第四模块
学习截图
这篇关于【金秋打卡】第14天-vue3.0实现todolist的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-23【JS逆向百例】爱疯官网登录逆向分析
- 2024-12-21Vue3教程:新手入门到实践应用
- 2024-12-21VueRouter4教程:从入门到实践
- 2024-12-20Vue3项目实战:从入门到上手
- 2024-12-20Vue3项目实战:新手入门教程
- 2024-12-20VueRouter4项目实战:新手入门教程
- 2024-12-20如何实现JDBC和jsp的关系?-icode9专业技术文章分享
- 2024-12-20Vue项目中实现TagsView标签栏导航的简单教程
- 2024-12-20Vue3入门教程:从零开始搭建你的第一个Vue3项目
- 2024-12-20从零开始学习vueRouter4:基础教程