课程名称:vue3.0实现todolist
章节名称:
讲师姓名:五月的夏天
课程内容(概述)
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
模式的区别
http://localhost:8080/#/home
http://localhost:8080/home
学习截图