班级网站 php,戴尔网站建设的目标,上海建设公司注册,如何查询到某网站开发商路由 vue-router 1.对路由的理解#xff1a; vue的一个插件库#xff0c;专门用来实现SPA应用 2.对SPA应用的理解#xff1a; 1.单页web应用2.整个应用只有一个完整的页面#xff08;index.html#xff09;3.点击页面中的导航链接不会刷新页面#xff0c;只做页面的局部…路由 vue-router 1.对路由的理解 vue的一个插件库专门用来实现SPA应用 2.对SPA应用的理解 1.单页web应用2.整个应用只有一个完整的页面index.html3.点击页面中的导航链接不会刷新页面只做页面的局部更新4.数据需要通过ajax请求获取3.什么是路由 1.一个路由就是一组映射关系**key-value** 2. **key为路径value可能是function或component** 4.路由的分类 **1.后端路由**1.理解value是function,用于处理客户端提交的请求2.工作过程服务器接收到一个请求时根据请求路径找到匹配的函数来处理请求返回响应数据**2.前端路由**1.理解value是component,用于展示页面内容2.工作过程当浏览器的路径改变时对应的组件就会显示路由的基本使用 1.安装vue-router npm i vue-router32.引入vueRouter,应用插件Vue.use(VueRouter) // 引入vueRouter import VueRouter from vue-router // 应用vue-router Vue.use(VueRouter)3.创建router–index.js编写router配置项 !-- 1.引入VueRouter --import VueRouter from vue-router!-- 2.引入要使用的组件About --import About from ../component/About!-- 3.创建并暴露router实例对象去管理一组一组的路由规则 --export default new VueRouter({routes:[ //路由规则routes是一个数组{path:/about, //路径component:About //当跳转到上述路径时要在页面显示的组件}]})4.实现切换active-class 可配置高亮样式 在组件中使用 router-link to路径About组件router-link/调用路由规则实现指定路由的切换然后将路由规则中路径对应的组件通过router-view/router-view呈现到页面上 !-- 使用router-link指定路由的切换--router-link active-classactive to/aboutAbout组件/router-link//router-view指定组件展示在什么位置router-view/router-view 5.几个注意点 1.**路由组件**通常存放在**pages**文件夹下**一般组件**存放在**components**文件夹下2.**通过切换隐藏了的路由组件默认是被销毁的需要的时候再去挂载**3.**每个组件都有自己的$route属性里面存储着自己的路由信息**4.**整个应用只有一个Router,可以通过组件的$router属性获取到**多级路由(嵌套路由) 配置路由规则使用children配置项在父亲组件中配置children本质是一个数组 routes:[{path:/about,component:About,children:[ //通过children配置子级路由{path:news, //此处一定不要写/多级路由只需写名字即可component:News},{path:message,component:Message},]},]2.跳转要带上父级路由写完整路径 router-link to/About/newsNews/router-link路由的query参数 1.传递参数(两种写法) 假如在message组件中有一组数据messageList 这时要将messageList里的id和title两个属性的值传递给message的子组件detail 使用query传参有两种写法 li v-formessage in messageList :key message.id!-- **第一种写法**跳转路由并携带query参数to的字符串写法 --!-- router-link to/home/message/detail?id${message.id}title${message.title}{{ message.title }}/router-linknbsp;nbsp;/li --!--**第二种写法** 跳转路由并携带query参数to的对象写法 --router-link :to{path:/home/message/detail,query:{id:message.id,title:message.title}}/router-linknbsp;nbsp;/li2.接收参数 接收参数就在子组件之中调用route接收 $route.query.id $route.query.title命名路由 1.作用可以简化路由的跳转 2.如何使用 给index.js中的路由加一个name:名字属性 routes:[{**name:about,** //通过name属性给每个组件配置一个名字path:/about,component:About,children:[ //通过children配置子级路由{**name:news,** // 通过name属性给每个组件配置一个名字path:news, //此处一定不要写/多级路由只需写名字即可component:News},{path:message,component:Message,children:[name:detail,path:detail,component:Detail],},]},]2.简化跳转,要将to写成对象写法 简化前: router-link to路径 /router-link简化后将to写成对象式 router-link :to{name:名字//这里也可以写为原来的 path:/home/message/detail,但是路径太长推荐使用namequery:{id:message.id,title:message.title}}/router-link路由的params参数 1.配置路由声明接收params参数 {path:message,component:Message,children:[{name:detail,**path:detail/:id/:title,** //**使用占位符声明接收params参数**component:Detail}]},2.传递参数 同样也有两种写法 li v-formessage in messageList :key message.id!-- 第一种方法**跳转路由并携带params参数to的字符串写法** --!-- router-link to/home/message/${message.id}/${message.title}{{ message.title }}/router-linknbsp;nbsp;/li --!-- 第二种方法**跳转路由并携带params参数to的对象写法** --!-- **用to的对象写法不能写配置项path只能写name** --router-link :to{name:detail,query:{id:message.id,title:message.title}}/router-linknbsp;nbsp;/li3.接收参数 与query接收参数同理 $route.params.id$route.params.title路由的props配置 作用让路由组件更方便的收到参数 谁接收数据就在谁的路由规则中写配置项props {path:message,component:Message,children:[{name:detail,path:detail/:id/:title,component:Detail,// detail接收数据// props值为函数该函数返回的对象中每一组key-value都会通过props传给Detail组件query与params都适用//props的参数是$route,通过$route可以拿到query或者params里的值props($route){ return {id:$route.params.id, 或者 id:$route.jquery.id, title:$route.params.title 或者 title:$route.jquery.title}}}]},组件中用props配置项接收在模板中使用数值 scriptexport default {name:Detail,props:[id,title],}/scriptrouter-link的replace属性 1.作用控制路由跳转时操作浏览器记录的模式 2.浏览器的历史记录有两种写入方式分别为push和replacepush是追加历史记录replace是替换当前记录路由跳转时默认为push 3.如何开启replace模式router-link replace........./router-link编程式路由导航 当标签不是a标签而是其他的标签如button标签时我们就不能使用router-link实现路由跳转了这时就用到了编程式导航 1.作用不借助实现路由跳转让路由跳转更灵活 2.具体编码 !-- $router的两个API,push与replace --//push是追加历史记录点击返回按钮可以返回上一次的记录this.router.push({//配置项params也可以换成queryname:,params:{ }})//replace是替换上一条记录不能通过返回按钮返回上一次记录this.router.replace({name:,params:{}})其他的API this.$router.back() //后退this.$router.forward() //前进this.$router.go(传入要前进几个或者后进几个的数字)缓存路由组件 1.作用让展示的路由组件保持挂载不被销毁 2.具体编码 keep-alive include要缓存的组件名router-view/router-view/keep-alive两个新的生命周期钩子 1.作用路由组件所独有的两个钩子用于捕获路由组件的激活状态 2.具体名字 **1.actived 路由组件被激活时触发2.deactived 路由组件失活时触发**路由守卫 1.作用对路由进行权限控制 2.分类全局守卫独享守卫组件内守卫 3.全局守卫 全局路由守卫写路由规则外面 给router–index.js需要进行路由守卫的添加 meta:{isAuth:false}用来控制是否要对前来的路由进行检查 给router–index.js所有配置路由规则的路由添加 meta:{title:网页标题名}使用全局后置路由配置网页标题 修改main.js // 全局前置路由守卫---初始化的时候被调用,每次路由切换之前被调用router.beforeEach((to, from, next) {if(to.meta.isAuth){ //控制是否需要鉴权if(localStorage.getItem(school)北京大学 ){next(); //放行}elsealert(学校名不对)}else{next() //放行}});// 全局后置路由守卫---初始化的时候被调用,每次路由切换之后被调用// 设置网页标题 router.afterEach((to,from){document.title to.meta.title ||好运})!-- 最后暴露 --export default router独享路由守卫 独享路由守卫写路由规则里面 {name:news,path:news,component:News,meta:{isAuth:true,title:新闻},// 独享路由守卫beforeEnter:(to,from,next){if(to.meta.isAuth){if(localStorage.getItem(school) 清华大学){next()}else{alert(学校名错误)}}else{next()}}},组件内守卫 组件内守卫包含进入守卫和离开守卫 进入守卫的to与离开守卫的from相同 1.进入守卫通过路由规则进入该组件时被调用* beforeRouteEnter(to,from,next){if(to.meta.isAuth){if(localStorage.getItem(school) 北京大学){next()}else{alert(学校名错误)}}else{next()} },离开守卫 通过路由规则离开该组件时被调用* beforeRouteLeave(to,from,next){next() }路由器的两种工作模式 1.hash模式: 1.对于一个url来说什么是hash值涉及#后面的内容就是hash值 2.hash值不会包含在http请求中即hash不会带给服务器 3.hash模式 地址中永远带着#号不美观 若以后将地址通过第三方收集app分享若app校验严格则地址会被标记为不合法 兼容性好 2.history模式 1.地址干净美观2.兼容性与hash相比略差3. 应用部署上线需要后端人员支持解决刷新页面服务端404的问题总结 1.Vue路由是Vue.js官方提供的一种前端路由管理方式它可以实现单页应用SPA的页面跳转和组件切换提供了一种优雅的方式来管理应用的URL。2.路由的基本概念路由是指根据不同的URL路径展示不同的内容或组件。在Vue中可以通过Vue Router来实现路由功能。3.安装和配置Vue Router首先需要通过npm安装Vue Router然后在Vue项目中引入并使用Vue Router。配置包括定义路由规则、设置默认路由、配置路由参数等。4.路由的基本使用在Vue Router中可以使用router-link组件来生成链接使用router-view组件来展示对应的组件内容。通过配置路由规则可以实现不同路径对应不同的组件。5.动态路由动态路由是指根据不同的参数生成不同的路由。在Vue Router中可以通过在路由路径中使用冒号(:)来定义动态参数并在组件中通过$route.params来获取参数值。6.嵌套路由嵌套路由是指在一个组件中嵌套另一个组件并且这两个组件都有自己的路由。在Vue Router中可以通过配置子路由来实现嵌套路由。7.路由导航守卫路由导航守卫可以在路由切换前后执行一些逻辑。Vue Router提供了多种导航守卫包括全局前置守卫、全局后置守卫、路由独享守卫等。