路由
vue-router 的理解
在2022年2月，默认版本都是，vue-router4，只能在vue3中使用
npm i vue-router //默认 npm i vue-router@3 //降级
vue 的一个插件库，专门用来实现 SPA 应用
对 SPA 应用的理解
- 单页 Web 应用（single page web application，SPA）。
- 整个应用只有一个完整的页面。
- 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
- 数据需要通过 ajax 请求获取。
路由的理解
1. 什么是路由?
1. 一个路由就是一组映射关系（key - value）
2. key 为路径, value 可能是 function 或 component
2. 路由分类
- 后端路由：
1) 理解：value 是 function, 用于处理客户端提交的请求。
2) 工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数
来处理请求, 返回响应数据。
- 前端路由：
1) 理解：value 是 component，用于展示页面内容。
2) 工作过程：当浏览器的路径改变时, 对应的组件就会显示。
总结: 编写使用路由的 2 步
- 定义路由组件 ,暴露并注册路由
//该文件，专门用于创建整个应用的路由器 import VueRouter from "vue-router"; //引入组件 import MyAbout from "@/components/MyAbout" import MyHome from "@/components/MyHome"; //创建并暴露一个路由器 export default new VueRouter({ routes:[ { path:'/about', component:MyAbout }, { path:'/home', component:MyHome }, ] })
- 使用路由
<!--原始html中我们使用的是a标签实现页面的跳转--> <!-- <a class="list-group-item active" href="./about.html">About</a> <a class="list-group-item" href="./home.html">Home</a> --> ======================================================================= <!--Vue借助router-link标签实现页面的跳转--> <router-link class="list-group-item" active-class="active" to="/about">About</router-link> <router-link class="list-group-item" active-class="active" to="/home">Home</router-link> </div> .... <!--指定组件的呈现位置--> <router-view></router-view> ....
active-class：实现切换（可以配置高亮样式）
router-view：指定展示位置
总结：注意事项
- 一般组件通常放在components文件中，路由组件放在pages文件中
- 通过切换，隐藏的路由组件和一般组件不一样，使用完后，就被vue销毁，如果再使用，就重新挂载
- 每个组件都有自己的$route属性，里面存储着自己的路由信息
- 整个应用只有一个router（路由器），可以通过组件的$router获取到。
多级路由（嵌套路由）
1.路由配置规则，使用chlidren配置项
routes:[ { path:'/about', component:MyAbout }, { path:'/home', component:MyHome, children:[ //通过chliaren配置子路由 { path:'homeMessage', //此处一定不要带 '/' component:HomeMessage, }, { path:'homeNews', //此处一定不要带 '/' component:HomeNews, } ], }, ]
2.跳转路径（要写完整路径）：
<router-link to="/home/homeMessage">Message</router-link>
路由的query参数
1.传递参数
<!--路由跳转，携带query参数,to的字符串写法--> <router-link :to="`/home/homeMessage/homeMessageDetail?id=${m.id}&tit=${m.tit}`">{{m.tit}}</router-link> <!--路由跳转，携带query参数,to的对象写法--> <router-link :to="{ path:'/home/homeMessage/homeMessageDetail', query:{id:m.id,tit:m.tit } }">{{m.tit}}</router-link>
2.接收参数
$route.query.id $route.query.tit
name属性简化路由
我们可以通过在routes中，写name属性，去简化路由
routes:[ { name：'xxxx', //命名 path:'/about', component:MyAbout }, { name：'xxxx', path:'/home', component:MyHome, children:[ //通过chliaren配置子路由 { name：'xxxx', path:'homeMessage', //此处一定不要带 '/' component:HomeMessage, }, { name：'xxxx', path:'homeNews', //此处一定不要带 '/' component:HomeNews, } ], }, ]
2.简化跳转
<!--原本的写法--> <router-link :to="`/home/homeMessage/homeMessageDetail?id=${m.id}&tit=${m.tit}`">{{m.tit}}</router-link> <!--路由跳转，携带query参数,to的对象写法--> <router-link :to="{ name:'xxxx', <!--这里写命名--> query:{id:m.id,tit:m.tit } }">{{m.tit}}</router-link>
路由的params参数
1.params
routes:[ { path:'/about', component:MyAbout }, { path:'/home', component:MyHome, children:[ { path:'homeMessage', component:HomeMessage, children:[ { name:'tang', path:'homeMessageDetail/:id/:tit', //占位符声明接收params参数 component:HomeMessageDetail, }, ] },
2.传递参数
<!--路由跳转，携带query参数,to的对象写法--> <router-link :to="{ name:'tang', params:{id:m.id,tit:m.tit} }">{{m.tit}}</router-link>
特别注意：路由器携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
3.接收参数
$route.params.id $route.params.tit
编程式路由导航
1.作用：不依赖于<router-link>实现路由跳转，让路由跳转更灵活
2.具体编码
//$router的2个API this.$router.push({ name:'tang', params:{id:m.id,tit:m.tit} }) }, this.$router.replace({ name:'tang', params:{id:m.id,tit:m.tit} }) }
Vue UI:组件库
7.1移动端常用UI组件库
- Vant https://youzan.github.io/vant
- Cube Ul https://didi.github.io/cube-ui<;
- Mint Ul http://mint-ui.github.io/#!/zh-cn
7.2PC端常用Ul组件库
- Element Ul https://element.eleme.cn
- IView Ul https://www.iviewui.com
