白也blog - router
type: channel
link: http://www.baiyeovo.cn/index.php/tag/router/
items: Vue Router 相关理解

Vue Router 相关理解
type: item
date: 2022-04-17T11:04:00+08:00
description: Vue Router 相关理解 基本路由 多级路由1.vue-router 的理解vue 的一个插件库，专门用来实现 SPA 应用 2.对SPA应用的理解1. 单页 Web 应用（single page web application， SPA ） 2. 整个应用只有一个完整的页面 3. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新 4. 数据需要通过 ajax 请求获取3.路由的理解1. 什么是路由?a. 一个路由就是一组映射关系（key - value） b. key 为路径， value 可能是 function 或 componen2. 路由分类a. 后端路由ⅰ. 理解： value 是 function ，用于处理客户端提交的请求ⅱ. 工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据b. 前端路由ⅰ. 理解： value 是 component ，用于展示页面内容ⅱ. 工作过程：当浏览器的路径改变时，对应的组件就会显示基本路由安装 vue-router ，命令 npm i vue-router应用插件 Vue.use(VueRouter)编写 router 配置项import VueRouter from 'vue-router' // 引入VueRouter import About from '../components/About' // 路由组件 import Home from '../components/Home' // 路由组件 // 创建router实例对象，去管理一组一组的路由规则 const router = new VueRouter({ routes:[ { path:'/about', component:About }, { path:'/home', component:Home } ] }) //暴露router export default router实现切换 浏览器会被替换为 a 标签active-class 可配置高亮样式 About 指定展示位 src/router/index.js 该文件专门用于创建整个应用的路由器 import VueRouter from 'vue-router' // 引入组件 import About from '../components/About' import Home from '../components/Home' // 创建并暴露一个路由器 export default new VueRouter({ routes:[ { path:'/about', component:About }, { path:'/home', component:Home } ] })几个注意事项路由组件通常存放在 pages 文件夹，一般组件通常存放在 components 文件夹比如上一节的案例就可以修改为src/pages/Home.vuesrc/pages/About.vuesrc/router/index.jssrc/components/Banner.vuesrc/App.vue通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载每个组件都有自己的 $route 属性，里面存储着自己的路由信息整个应用只有一个 router ，可以通过组件的 $router 属性获取到多级路由配置路由规则，使用 children 配置项routes:[ { path: '/page1', component: Page1, // 这个组件内部还有router-view children: [ { path:'', // path为空，表示当 #/page1时，显示 Page1组件+组件1 component: 组件1 // }, { path:'/xx1', // path以/开头，表示当 #/xx1时，显示 Page1组件+组件2 component: 组件2 }, { path:'xx2', // path以/开头，表示当 /page1/xx2时，显示 Page1组件+组件3 component: 组件3 } ] } ]跳转（子路由不加'/'要写完整路径） News 总结：在已有的路由容器中，再实现一套路由，再套一个路由容器，叫：嵌套路由。嵌套路由除了 router-view 之间需要嵌套，路由规则也需要通过children来实现嵌套。路由-重定向在router/index.js - 修改配置const routes = [ { path: "/", redirect: "/home" // 重定向 } ]路由404统一处理异常地址：那些个正常配置的地址之外的地址。 通过通配符*，设置404页…