Vue路由和组件库

vue路由

        1-什么是路由 --路径与组件之间的关系

        2-为什么使用路由---在一个页面中切换业务场景.所有的功能在一个页面上实现,利用路由的功

        能实现不切换页面进行局部刷新,实现极高的体验感,开发效率高,数据传递容易,这就是前端路

        由的作用

        3-缺点 --开发成本高 需要学习专门的知识 首次加载的时候比较慢,不利于seo

        1--安装 &＃61;&＃61;> yarn add vue-router

        2--使用路由插件 &＃61;&＃61;>.Vue.use(VueRouter)

        3--创建路由规则数组 &＃61;&＃61;> const routes &＃61; [{ 路由参数 }}

        4--创建路由对象 - 传入规则 &＃61;&＃61;>const router &＃61; new VueRouter({
                                                                           routes
                                                                                                               })

        5--关联到Vue的实例&＃61;&＃61;>    new Vue({
                                                          router
                                                                        })

        6--在app.vue文件中创建挂载点   使用标签承载相关的数据

        说明:可用全局组件router-link来替代a标签

1. vue-router提供了一个全局组件 router-link

2. router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)

3. router-link提供了声明式导航高亮的功能(自带类名)

        例如:    xx文本

        说明:在跳转路由时, 可以给路由对应的组件内传值

        在router-link上的to属性传值, 语法格式如下

                /path?参数名&＃61;值   

                /path/值 – 需要路由对象提前配置 path: “/path/参数名”

        对应页面组件接收传递过来的值

                $route.query.参数名        

                $route.params.参数名

                说明:在打开某个路径的时候,如果匹配,就强制切换到目标路径上

               1- 网页打开url默认hash值是/路径

               2-redirect是设置要重定向到哪个路由路径

const routes &＃61; [{path: "/", // 默认hash值路径redirect: "/自定义的名" // 重定向到/自定义的名// 浏览器url中#后的路径被改变成/自定义的名-重新匹配数组规则}
]//强制重定向后, 还会重新来数组里匹配一次规则

        说明:如果路由hash值, 没有和数组里规则匹配,就默认给一个404页面

        1-创建一个404转跳的页面

        2-在main.js的路由配置中,最后面配置  一定要在最后

import NotFound from &＃39;&＃64;/views/NotFound&＃39; //自己定义的404页面 要引入const routes &＃61; [// ...省略了其他配置// 404在最后(规则是从前往后逐个比较path){path: "*",component: NotFound}
]

        1-默认显示的是hash的样式,带个#号

        2-history

const router &＃61; new VueRouter({routes,mode: "history" // 打包上线后需要后台支持, 模式是hash
})

七-编程式导航

        说明:利用js代码进行转跳

//main.js中
this.$router.push({path: "路由路径", // 去 router/index.js中定义name: "路由名"
})

        跳转vue文件中

xx文本
//也可以用其他标签
八-全局前置守卫

     说明:   路由跳转之前, 先执行一次前置守卫函数, 判断是否可以正常跳转

        1-固定方法beforeEach

//设置条件 或者根据接口文档的要求判断router.beforeEach((to, from, next) &＃61;> {//to 要跳转的路由 目标
//from 从哪里跳转的路由 来源
//next() 函数体 - next()才会让路由正常的跳转切换, next(false)在原地停留, next("强制修改到另一个路由路径上" &＃61;&＃61;>next(强制跳转的路径)) if (to.path &＃61;&＃61;&＃61; "/my" && "条件"&＃61;&＃61;&＃61; false) {alert("请满足条件")next(false) // 阻止路由跳转} else {next() // 正常放行}
})
九-vant组件库

        vant是一个轻量、可靠的移动端 Vue 组件库, 开箱即用

                提供六十多个高质量的组件,能覆盖移动端各类的场景

                性能好,组件体积平均不到1kb

                双语(中英)文档支持

                支持vue2  vue3

                支持按需导入