Web前端框架应用（三）路由

一、Vue Router的安装1.创建项目注Vue3对应的是Router4版本Vue2对应的是Router3版本2.下载router下载前下载后4是版本也可以写4.2.5--save是使用路由yarn add vue-router4 --save二、Vue Router的基本使用1.目录结构2.案例代码Abouttemplate div classabout-container h3About组件/h3 /div /template style scoped .about-container { min-height: 150px; background-color: #f2f2f2; padding: 15px; } /styleHometemplate div classhome-container h3Home组件/h3 /div /template style scoped .home-container { min-height: 150px; background-color: #f2f2f2; padding: 15px; } /styleApp根组件template div classapp-container h1App根组件/h1 !-- router-link:定义导航链接 -- !-- to:指定链接的地址与路由中的path对应 -- router-link to/home首页/router-link router-link to/about关于/router-link hr / !-- 路由对应组件显示的位置 -- router-view/router-view /div /template style scoped .app-container { text-align: center; font-size: 16px; } .app-container a { padding: 10px; color: #000; } .app-container a.router-link-active { color: #fff; background-color: #000; } /stylerouter.js版本一一次直接加载所有组件import {createRouter, createWebHistory} from vue-router import Home from ./components/Home.vue import About from ./components/About.vue const routes createRouter({ history: createWebHistory(),//history:指定路由模式createWebHistory()是HTML5的history模式 routes:[ {path:/home,component:Home}, {path:/about,component:About}, ] }) export default routes版本二懒加载动态加载import {createRouter, createWebHistory} from vue-router // import Home from ./components/Home.vue // import About from ./components/About.vue const routes createRouter({ history: createWebHistory(),//history:指定路由模式createWebHistory()是HTML5的history模式 routes:[ {path:/home,component:()import(./components/Home.vue)}, {path:/about,component:()import(./components/About.vue)}, ] }) export default routesmain.jsimport { createApp } from vue import ./style.css import App from ./App.vue // 1.引入路由模块 import router from ./router.js const app createApp(App) // 2.注册路由模块 app.use(router) app.mount(#app)3.效果三、路由重定向在第二点案例的基础上添加重定向代码router.js效果输入http://localhost:5173/会跳转到http://localhost:5173/home四、嵌套路由1.目录结构1.在conponents下新建pages文件夹2.在pages下新建文件2.案例代码编写Tab1template divTab1组件/div /template style scoped div{ text-align: left; background-color: #9dc4e5; } /styleTab2template divTab2组件/div /template style scoped div{ text-align: left; background-color: #ffba00; } /styleAbout在第三点的案例基础上router.js注嵌套组件的路径不加‘‘/’’效果五、动态路由1.监听路由添加到About效果2.获取动态路径参数值法1$route.params在components下创建Movie在根组件App下添加目标地址在pages下添加MovieDetails将Movie和MovieDetails添加到router.js中效果法2props修改MovieDetails修改router.js六、命名路由模板注name属性是唯一的修改Home修改router.js注大小写要一致效果七、编程式导航1.两种导航方式声明式导航router-link标签编程式导航useRouter()函数2.编程式导航方法1.push()push()方法会向历史记录中添加一个新的记录以编程方式导航到一个新的URL。当用户单击浏览器后退按钮时会回到之前的URL。push()方法的参数可以是一个字符串路径或者一个描述地址的对象router.push(/about/tab1) // 字符串路径 router.push({ path: /about/tab1 }) // 带有路径的对象 router.push({ name: user, params: { userId: 123} }) // 命名路由 router.push({ path: /user, query: { id: 1 } }) // 带查询参数如/user?id1 router.push({ path: /user, hash: #admin }) // 带有Hash值如/user#admin如果在参数的对象中提供了path则params会被忽略。为了传递参数需要提供路由的name或者手动拼接带有参数的pathconst id 123 router.push({ name: /user, params: { userId } }) // 跳转到/user/123 router.push({ path: /user/${userId} }) // 跳转到/user/123 // 以下是params不生效的情况 router.push({ path: /user, params: { userId } }) // 跳转到/user案例修改Home用编程式导航代替声明式导航2.replace()replace()方法在导航后不会向历史记录中添加新的记录而是会替换历史记录中的当前记录。在声明式导航中为router-link标签添加replace属性也能实现与replace()方法类似的效果。// 编程式导航 router.replace({ path: /user }) !-- 声明式导航 -- router-link :to{ path: /user } replace/router-link3.go()go()方法用于实现前进或后退的效果其参数表示历史记录中前进或后退的步数类似于window.history.go()相应的地址栏也会发生改变。go(1)表示前进一条记录。go(-1)表示后退一条记录。案例效果八、导航守卫导航守卫用于控制路由的访问权限。1.规则const router createRouter() router.beforeEach((to, from, next) {})//定义全局前置守卫 router.afterEach((to, from, next) {})//定义全局后置守卫每个全局导航守卫方法中接收3个形参to、from和next。to表示目标路由对象from表示当前导航正要离开的路由对象nextnext为函数如果不接收next()函数则默认允许用户访问每一个路由如果接收了next()函数则必须调用next()函数否则不允许用户访问任何一个路由。2.案例在conponents下创建Login在router.js下添加效果九、后台管理系统1.准备工作1.1创建项目创建命令npm create vite4.1.0 manage-system选择打开vscode运行项目// 运行命令 npm run dev // 下载依赖 npm install1.2下载router下载命令yarn add vue-router4 --save在src文件夹下创建router.js编写router.js的基本代码修改mian.js2.渲染登录组件2.1把Login写入router2.2清空App导入router视图3.实现登录功能在components文件夹下创建Login编写Login代码template div classlogin-container div classlogin-box !-- 头像区域 -- div classavatar-box img src../assets/logo.png classavatar / /div !-- 表单区域 -- div classform-login !-- 登录名称 -- div classform-group label forusername登录名称:/label input typetext classform-control idusername placeholder请输入登录名称 autocompleteoff v-model.trimusername/ /div !-- 登录密码 -- div classform-group label forpassword登录密码:/label input typepassword classform-control idpassword placeholder请输入登录密码 v-model.trimpassword/ /div !-- 登录按钮 -- div classform-group button typebutton classbtn clickonLogin登录/button /div /div /div /div /template script setup import { ref } from vue import { useRouter } from vue-router const username ref() const password ref() const router useRouter() const onLogin () { if (username.value admin password.value 123456) { router.push(/home) return localStorage.setItem(token, Bearer xxx)//保存token } else { alert(用户名或密码错误) localStorage.removeItem(token)//清除token } } /script4.渲染后台主页组件4.1编写首页相关代码在components下创建Home编写Home在components下创建subcomponents文件夹在subcomponents下创建MyHeader和MyAsideMyHeaderMyAsiderouter将子组件添加到router下4.2创建各侧边栏子组件目录内容5.实现退出功能MyHeader6.全局控制路由访问权限router7.渲染用户管理页面的数据8.跳转到用户详情页在MyUsers下修改详情功能在components下创建文件夹users在users文件夹下创建vue文件MyUserDetail在router中填写MyUserDetail路径9.使用props获取用户编号router添加propsMyUserDetail编写代码10.解决详情页左侧菜单激活问题11.解决样式问题11.1未添加样式11.2添加样式11.3样式代码MyHeaderstyle scoped .layout-header-container { height: 60px; border-bottom: 1px solid #eaeaea; display: flex; justify-content: space-between; align-items: center; padding: 0 0.5rem; background-color: #5f9ea0; .layout-header-left{ display: flex; align-items: center; color: #fff; } } .layout-header-left-img { height: 50px; } .layout-header-right{ .btn{ background-color: #5f9ea0; color: #fff; } .btn:hover{ color: #999; opacity: 0.5; background-color: #fff; } } /styleMyAsidestyle scoped .layout-aside-container { width: 250px; height: 100%; border-right: 1px solid #eaeaea; } .menu { list-style-type: none; padding: 0; .menu-item { line-height: 50px; font-weight: bold; font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif; :hover { background-color: #efefef; cursor: pointer; } a { display: block; color: black; padding-left: 30px; :hover { text-decoration: none; } } } } /* 设置路由高亮效果 */ .router-link-active { background-color: #efefef; box-sizing: border-box; position: relative; /* 伪元素实现路由高亮效果 */ ::before { content: ; display: block; width: 4px; height: 100%; position: absolute; left: 0; top: 0; background-color: #42b983; } } /styleMyUserDetailstyle scoped button{ background-color: #409eff; color: #fff; } /styleHomestyle .home-container { height: 100%; display: flex; flex-direction: column; .home-main-box { height: 100%; display: flex; .home-main-body { padding: 15px; flex: 1; } } } /styleLoginstyle scoped .login-container { background-color: #35495e; height: 100%; .login-box { width: 400px; height: 250px; background-color: #fff; border-radius: 3px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 6px rgba(255, 255, 255, 0.5); .form-login { position: absolute; bottom: 0; left: 0; width: 100%; box-sizing: border-box; padding: 1.5rem!important; .form-group{ padding-top: 20px; .btn{ background-color:deepskyblue; color: #fff; } } } } } .form-control{ flex: 1; padding: 0.5rem; } .avatar-box { position: absolute; width: 100%; top: -65px; left: 0; .avatar { width: 120px; height: 120px; border-radius: 50% !important; box-shadow: 0 0 6px #efefef; background-color: #fff; } } /stylestyle.css:root { font-family: Inter, Avenir, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; color-scheme: light dark; color: rgba(255, 255, 255, 0.87); background-color: #242424; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; } a { font-weight: 500; color: #646cff; text-decoration: inherit; } a:hover { color: #535bf2; } a { font-weight: 500; color: #646cff; text-decoration: inherit; } a:hover { color: #535bf2; } /* body { margin: 0; display: flex; place-items: center; min-width: 320px; min-height: 100vh; } */ body { margin: 0; display: flex; place-items: center; height: 100%; } html{ height: 100%; } h1 { font-size: 3.2em; line-height: 1.1; } button { border-radius: 8px; border: 1px solid transparent; padding: 0.6em 1.2em; font-size: 1em; font-weight: 500; font-family: inherit; background-color: #1a1a1a; cursor: pointer; transition: border-color 0.25s; } button:hover { border-color: #646cff; } button:focus, button:focus-visible { outline: 4px auto -webkit-focus-ring-color; } .card { padding: 2em; } /* #app { width: 1280px; margin: 0 auto; padding: 2rem; text-align: center; } */ #app { width: 100%; margin: 0 auto; text-align: center; height: 100%; } media (prefers-color-scheme: light) { :root { color: #213547; background-color: #ffffff; } a:hover { color: #747bff; } button { background-color: #f9f9f9; } }12.完整代码目录代码省略。。。