江苏扬州建设工程信息网站做移门的网站

当前位置： 首页 > news >正文

江苏扬州建设工程信息网站,做移门的网站,后端开发工作内容,厦门集美区网站建设文章目录相关理解vue-router的理解对SPA应用的理解路由的理解基本路由几个注意点嵌套路由——多级路由路由query参数命名路由路由的params参数路由的props配置路由跳转的replace方法编程式路由导航缓存路由组件路由组件独有的生命钩子activated和deactivated路由守卫全局路由守… 文章目录相关理解vue-router的理解对SPA应用的理解路由的理解基本路由几个注意点嵌套路由——多级路由路由query参数命名路由路由的params参数路由的props配置路由跳转的replace方法编程式路由导航缓存路由组件路由组件独有的生命钩子activated和deactivated路由守卫全局路由守卫独享路由守卫组件内路由守卫路由器的两种工作模式相关理解 vue-router的理解 vue 的一个插件库专门用来实现SPA 应用 对SPA应用的理解 单页 Web 应用single page web applicationSPA整个应用只有一个完整的页面点击页面中的导航链接不会刷新页面只会做页面的局部更新数据需要通过ajax请求获取 路由的理解 什么是路由? 一个路由就是一组映射关系key - value key 为路径value 可能是 function 或 componen
路由分类 后端路由 理解value 是 function用于处理客户端提交的请求 工作过程服务器接收到一个请求时根据请求路径找到匹配的函数来处理请求返回响应数据
前端路由 理解value 是 component用于展示页面内容工作过程当浏览器的路径改变时对应的组件就会显示 基本路由 下载vue-routernpm i vue-routerAbout.vue templateh2我是About组件的内容/h2/templatescriptexport default {name:About}/script Home.vue templateh2我是Home组件的内容/h2/templatescriptexport default {name:Home}/script src/router/index.js //该文件专门用于创建整个应用的路由器 import VueRouter from vue-router; //引入组件 import Home from ../components/Home import About from ../components/About//创建并暴露一个路由器 export default new VueRouter({routes:[{path:/about,component:About},{path:/home,component:Home}] })main.js import Vue from vue import App from ./App.vue import VueRouter from vue-router import router from ./routerVue.config.productionTip false Vue.use(VueRouter)new Vue({el:#app,render: h h(App),router }) App.vue templatedivdiv classrowdiv classcol-xs-offset-2 col-xs-8div classpage-headerh2Vue Router Demo/h2/div/div/divdiv classrowdiv classcol-xs-2 col-xs-offset-2div classlist-group!– 原始html中我们使用a标签实现页面跳转 –!– a classlist-group-item active href./about.htmlAbout/aa classlist-group-item href./home.htmlHome/a –!– Vue中借助router-link标签实现路由的切换 –router-link classlist-group-item active-classactive to/about About/router-linkrouter-link classlist-group-item active-classactive to/homeHome/router-link/div/divdiv classcol-xs-6div classpaneldiv classpanel-body!– 指定组件的呈现位置 –router-view/router-view/div/div/div/div/div /templatescriptexport default {name:App,} /script 总结 安装vue-router命令npm i vue-router 应用插件Vue.use(VueRouter)
编写router配置项 //引入VueRouter import VueRouter from vue-router //引入Luyou 组件 import About from ../components/About import Home from ../components/Home//创建router实例对象去管理一组一组的路由规则 const router new VueRouter({routes:[{path:/about,component:About},{path:/home,component:Home}] }) export default router首先引入对应的组件然后配置路由的key:value格式的数据//暴露router export default router 实现切换active-class可配置高亮样式 router-link active-classactive to/aboutAbout/router-linkrouter-view/router-view来指定我们的路由组件的显示地方 指定展示位 router-view/router-view 几个注意点 路由组件通常存放在pages文件夹一般组件通常存放在components文件夹通过切换“隐藏”了的路由组件默认是被销毁掉的需要的时候再去挂载每个组件都有自己的\(route属性里面存储着自己的路由信息整个应用只有一个router可以通过组件的\)router属性获取到 嵌套路由——多级路由 home.vue templatedivh2Home组件内容/h2divul classnav nav-tabslirouter-link classlist-group-item active-classactive to/home/news News/router-link/lilirouter-link classlist-group-item active-classactive to/home/messageMessage/router-link/li/ulrouter-view/router-view/div/div /templatescriptexport default {name:Home} /script About.vue templateh2我是About组件的内容/h2/templatescriptexport default {name:About}/script News.vue templateullinews001/lilinews002/lilinews003/li/ul /templatescriptexport default {name:News} /script router/index.js //该文件专门用于创建整个应用的路由器 import VueRouter from vue-router; //引入组件 import Home from ../pages/Home import About from ../pages/About import News from ../pages/News import Message from ../pages/Message//创建并暴露一个路由器 export default new VueRouter({routes:[{path:/about,component:About},{path:/home,component:Home,children:[{path:news,component:News},{path:message,component:Message}]}] }) 总结 配置多级路由规则使用children配置项 routes:[{path:/about,component:About,},{path:/home,component:Home,children:[ //通过children配置子级路由{path:news, //此处一定不要写/newscomponent:News},{path:message, //此处一定不要写/messagecomponent:Message}]} ]是在哪个路由组件中就去对应的router中配置children的子级路由 跳转要写完整路径router-link to/home/newsNews/router-link 路由query参数 将数据写入queryString中来进行数据传递 Messgae.vue templatedivulli v-form in messageList :keym.id!– 跳转路由并携带query参数to的字符串写法 –!– router-link :to/home/message/detail?id\({m.id}title\){m.title}{{m.title}}/router-linknbsp;nbsp; –!– 跳转路由并携带query参数to的对象写法 –router-link :to{path:/home/message/detail,query:{id:m.id,title:m.title}}{{m.title}}/router-linknbsp;nbsp;/li/ulhr/router-view/router-view/div /templatescriptexport default {name:News,data(){return{messageList:[{id:001,title:消息001},{id:002,title:消息002},{id:003,title:消息003}]}}} /script Detail.vue templateulli消息编号{{\(route.query.id}}/lili消息标题{{\)route.query.title}}/li/ul /templatescriptexport default {name:Detail} /script router/index.js //该文件专门用于创建整个应用的路由器 import VueRouter from vue-router; //引入组件 import Home from ../pages/Home import About from ../pages/About import News from ../pages/News import Message from ../pages/Message import Detail from ../pages/Detail//创建并暴露一个路由器 export default new VueRouter({routes:[{path:/about,component:About},{path:/home,component:Home,children:[{path:news,component:News},{path:message,component:Message,children:[{path:detail,component:Detail}]}]}] }) 总结 传递参数 to的字符串写法我们需要给to加上因为是为了让其识别query参数所以要将其识别为js语法而不是字符串,为了能使用模板\({},所以字符串内写成 router-link :to/home/message/detail?id\){m.id}title\({m.title}{{m.title}}/router-link!-- 跳转并携带query参数to的对象写法 -- router-link :to{path:/home/message/detail,query:{id:666,title:你好} }跳转/router-link如果比较复杂就写成对象模式不负责就写成字符串形式 接收参数 \)route.query.id\(route.query.title 命名路由 //该文件专门用于创建整个应用的路由器 import VueRouter from vue-router; //引入组件 import Home from ../pages/Home import About from ../pages/About import News from ../pages/News import Message from ../pages/Message import Detail from ../pages/Detail//创建并暴露一个路由器 export default new VueRouter({routes:[{path:/about,component:About},{path:/home,component:Home,children:[{path:news,component:News},{//name配置项为路由命名name:xiangqing,path:message,component:Message,children:[{path:detail,component:Detail}]}]}] }) 使用路由名进行跳转 templatedivulli v-form in messageList :keym.id!-- 跳转路由并携带query参数to的字符串写法 --!-- router-link :to/home/message/detail?id\){m.id}title\({m.title}{{m.title}}/router-linknbsp;nbsp; --!-- 跳转路由并携带query参数to的对象写法 --router-link :to{//使用name进行跳转name:xiangqing,query:{id:m.id,title:m.title}}{{m.title}}/router-linknbsp;nbsp;/li/ulhr/router-view/router-view/div /templatescriptexport default {name:News,data(){return{messageList:[{id:001,title:消息001},{id:002,title:消息002},{id:003,title:消息003}]}}} /script 总结 命名路由 作用可以简化路由的跳转 如何使用 给路由命名 在路由配置中给对应的路由配置name属性 {path:/demo,component:Demo,children:[{path:test,component:Test,children:[{name:hello //给路由命名path:welcome,component:Hello,}]}] }简化跳转 我们在跳转的时候可以使用path方式也可以使用name方式 如果是使用对象形式实现name跳转在对象中就可以配置name属性如果使用字符串使用name方式实现字符串的对象形式实现 !--简化前需要写完整的路径 -- router-link to/demo/test/welcome跳转/router-link!--简化后直接通过名字跳转 -- router-link :to{name:hello}跳转/router-link!--简化写法配合传递参数 -- router-link :to{name:hello,query:{id:666,title:你好}} 跳转/router-link路由的params参数 将数据写在url中来进行数据传递 Message.vue templatedivulli v-form in messageList :keym.id!-- 跳转路由并携带params参数to的字符串写法 --!-- router-link :to/home/message/detail/\){m.id}/\({m.title}{{m.title}}/router-linknbsp;nbsp; --!-- 跳转路由并携带params参数to的对象写法 --router-link :to{name:xiangqing,params:{id:m.id,title:m.title}}{{m.title}}/router-linknbsp;nbsp;/li/ulhr/router-view/router-view/div /templatescriptexport default {name:News,data(){return{messageList:[{id:001,title:消息001},{id:002,title:消息002},{id:003,title:消息003}]}}} /script Detail.vue templateulli消息编号{{\)route.params.id}}/lili消息标题{{\(route.params.title}}/li/ul /templatescriptexport default {name:Detail} /script router/idnex.js //该文件专门用于创建整个应用的路由器 import VueRouter from vue-router; //引入组件 import Home from ../pages/Home import About from ../pages/About import News from ../pages/News import Message from ../pages/Message import Detail from ../pages/Detail//创建并暴露一个路由器 export default new VueRouter({routes:[{path:/about,component:About},{path:/home,component:Home,children:[{path:news,component:News},{path:message,component:Message,children:[{name:xiangqing,path:detail/:id/:title,//使用占位符声明接收params参数component:Detail}]}]}] }) 总结 我们在路由配置中使用占位符声明接收的params参数 {path:/home,component:Home,children:[{path:news,component:News},{component:Message,children:[{name:xiangqing,path:detail/:id/:title, //使用占位符声明接收params参数component:Detail}]}] } 跳转路由时候需要带着对应的params数据 字符串形式对象形式 !-- 跳转并携带params参数to的字符串写法 -- router-link :to/home/message/detail/666/你好跳转/router-link!-- 跳转并携带params参数to的对象写法 -- router-link :to{name:xiangqing,params:{id:666,title:你好}} 跳转/router-link 特别注意路由携带params参数时若使用to的对象写法则不能使用path配置项必须使用name配置使用数据使用\)route.params.属性名 \(route.params.id \)route.params.title路由的props配置 我们去取params的数据或者是query数据都需要通过this.route.params或者是this.route.query如果都写在组件中就会显示的很长所以我们可以通过props来进行简化将对应的数据直接转换成我们的props中的数据 Message.vue templatedivulli v-form in messageList :keym.idrouter-link :to{name:xiangqing,params:{id:m.id,title:m.title}}{{m.title}}/router-linknbsp;nbsp;/li/ulhr/router-view/router-view/div /templatescriptexport default {name:News,data(){return{messageList:[{id:001,title:消息001},{id:002,title:消息002},{id:003,title:消息003}]}}} /script index.js //该文件专门用于创建整个应用的路由器 import VueRouter from vue-router; //引入组件 import Home from ../pages/Home import About from ../pages/About import News from ../pages/News import Message from ../pages/Message import Detail from ../pages/Detail//创建并暴露一个路由器 export default new VueRouter({routes:[{path:/about,component:About},{path:/home,component:Home,children:[{path:news,component:News},{path:message,component:Message,children:[{name:xiangqing,path:detail/:id/:title,component:Detail,//props的第一种写法值为对象该对象中的所有key-value都会以props的形式传给Detail组件。// props:{a:1,b:hello}//props的第二种写法值为布尔值若布尔值为真就会把该路由组件收到的所有params参数以props的形式传给Detail组件。// props:true//props的第三种写法值为函数props(\(route){return {id:\)route.params.id,title:\(route.params.title,}}}]}]}] }) Detail.vue templateulli消息编号{{id}}/lili消息标题{{title}}/li/ul /templatescriptexport default {name:Detail,props:[id,title]} /script 总结 作用让路由组件更方便的收到参数 {name:xiangqing,path:detail/:id,component:Detail,//第一种写法props值为对象该对象中所有的key-value的组合最终都会通过props传给Detail组件// props:{a:900}//第二种写法props值为布尔值布尔值为true则把路由收到的所有params参数通过props传给Detail组件// props:true//第三种写法props值为函数该函数返回的对象中每一组key-value都会通过props传给Detail组件props(route){return {id:route.query.id,title:route.query.title}} }三种写法 第一种比较死板是写死在我们的路由配置中不管怎么跳转都有这个数据第二种只能用于params方式传值转换为我们的props第三种比较灵活这种方式就将组件中的业务逻辑转移到配置中组件就专注页面不会那么复杂 路由跳转的replace方法 templatedivh2Home组件内容/h2divul classnav nav-tabslirouter-link replace classlist-group-item active-classactive to/home/newsNews/router-link/lilirouter-link replace classlist-group-item active-classactive to/home/messageMessage/router-link/li/ulrouter-view/router-view/div/div /templatescriptexport default {name:Home} /script 总结 作用控制路由跳转时操作浏览器历史记录的模式浏览器的历史记录有两种写入方式push和replace其中push是追加历史记录replace是替换当前记录。路由跳转时候默认为push方式 每进一个路由就会往栈中进入一个路由记录如果是push状态就是一直往栈顶进入一个新的路由记录如果是replace模式那么每进一个路由就把栈顶的路由记录进行替换 开启replace模式router-link replace ...News/router-link 编程式路由导航 我们有时候的进行路由跳转可能是通过点击按钮来进行路由跳转所以就用不了我们的router-link,这时候就会用到我们的编程式导航 Banner.vue templatediv classcol-xs-offset-2 col-xs-8div classpage-headerh2Vue Router Demo/h2button clickback后退/buttonbutton clickforward前进/buttonbutton clicktest测试一下go/button/div/div /templatescriptexport default {name:Banner,methods:{back(){this.\)router.back()},forward(){this.\(router.forward()},test(){this.\)router.go(3)}},} /script Message.vue templatedivulli v-form in messageList :keym.idrouter-link :to{name:xiangqing,params:{id:m.id,title:m.title}}{{m.title}}/router-linkbutton clickshowPush(m)push查看/buttonbutton clickshowReplace(m)replace查看/button/li/ulhr/router-view/router-view/div /templatescriptexport default {name:News,data(){return{messageList:[{id:001,title:消息001},{id:002,title:消息002},{id:003,title:消息003}]}},methods:{showPush(m){this.\(router.push({name:xiangqing,query:{id:m.id,title:m.title}})},showReplace(m){this.\)router.replace({name:xiangqing,query:{id:m.id,title:m.title}})}}} /script 总结 作用不借助router-link实现路由跳转让路由跳转更加灵活 具体编码 this.\(router.push({name:xiangqing,params:{id:xxx,title:xxx} })this.\)router.replace({name:xiangqing,params:{id:xxx,title:xxx} }) this.\(router.forward() //前进 this.\)router.back() //后退 this.\(router.go() //可前进也可后退 缓存路由组件 我们知道从一个路由切换到另一个路由会导致前一个路由页面销毁但是有时候我们在这个被销毁的页面填写的数据我们不希望数据消失这时候就需要缓存路由了 News.vue templateullinews001 input typetext/lilinews002 input typetext/lilinews003 input typetext/li/ul /templatescriptexport default {name:News} /script Home.vue templatedivh2Home组件内容/h2divul classnav nav-tabslirouter-link replace classlist-group-item active-classactive to/home/newsNews/router-link/lilirouter-link replace classlist-group-item active-classactive to/home/messageMessage/router-link/li/ulkeep-alive includeNewsrouter-view/router-view/keep-alive/div/div /templatescriptexport default {name:Home} /script 总结 作用让不展示的路由组件保持挂载不被销毁 具体编码 //缓存一个路由组件 keep-alive includeNews //include中写想要缓存的组件名不写表示全部缓存router-view/router-view /keep-alive//缓存多个路由组件 keep-alive :include[News,Message] router-view/router-view /keep-alive include里面写的组件名也就是我们组件中name属性 路由组件独有的生命钩子 activated和deactivated templateulli :style{opacity}欢迎学习vue/lilinews001 input typetext/lilinews002 input typetext/lilinews003 input typetext/li/ul /templatescriptexport default {name:News,data(){return{opacity:1}},activated(){console.log(News组件被激活了)this.timer setInterval(() {this.opacity - 0.01if(this.opacity 0) this.opacity 1},16)},deactivated(){console.log(News组件失活了)clearInterval(this.timer)}} /script 总结 activated和deactivated是路由组件所独有的两个钩子用于捕获路由组件的激活状态具体使用 activated路由组件被激活时触发deactivated路由组件失活时触发 如果我们对路由页面不进行缓存那么我们离开这个页面就会触发这个组件的销毁进入时触发组件的创建但是我们如果对路由页面进行缓存那么我们离开的时候并不会导致组件的销毁但是有些东西我们希望离开页面就不需要运行了比如某些定时器所以我们的可以使用activated和deactivated 路由守卫 全局路由守卫 //该文件专门用于创建整个应用的路由器 import VueRouter from vue-router; //引入组件 import Home from ../pages/Home import About from ../pages/About import News from ../pages/News import Message from ../pages/Message import Detail from ../pages/Detail//创建一个路由器 const router new VueRouter({routes:[{name:guanyv,path:/about,component:About,meta:{title:关于}},{name:zhuye,path:/home,component:Home,meta:{title:主页},children:[{name:xinwen,path:news,component:News,meta:{isAuth:true,title:新闻}},{name:xiaoxi,path:message,component:Message,meta:{isAuth:true,title:消息},children:[{name:xiangqing,path:detail,component:Detail,meta:{isAuth:true,title:详情},props(\)route){return {id:\(route.query.id,title:\)route.query.title,}}}]}]}] })//全局前置路由守卫————初始化的时候、每次路由切换之前被调用 router.beforeEach((to,from,next) {console.log(前置路由守卫,to,from)//to.meta.isAuth如果为true说明我们这个页面需要进行权限验证if(to.meta.isAuth){if(localStorage.getItem(school)atguigu){next()}else{alert(学校名不对无权限查看)}}else{next()} })//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用 router.afterEach((to,from){console.log(后置路由守卫,to,from)document.title to.meta.title || 硅谷系统 })//导出路由器 export default router meta是我们路由提供给我们程序员来写一些元数据的地方next表示放行也就是进行了路由页面跳转to表示当前去哪个页面from表示当前来自于哪个页面 独享路由守卫 //该文件专门用于创建整个应用的路由器 import VueRouter from vue-router; //引入组件 import Home from ../pages/Home import About from ../pages/About import News from ../pages/News import Message from ../pages/Message import Detail from ../pages/Detail//创建一个路由器 const router new VueRouter({routes:[{name:guanyv,path:/about,component:About,meta:{title:关于}},{name:zhuye,path:/home,component:Home,meta:{title:主页},children:[{name:xinwen,path:news,component:News,meta:{title:新闻},//独享守卫特定路由切换之后被调用beforeEnter(to,from,next){console.log(独享路由守卫,to,from)if(localStorage.getItem(school) atguigu){next()}else{alert(暂无权限查看)}}},{name:xiaoxi,path:message,component:Message,meta:{title:消息},children:[{name:xiangqing,path:detail,component:Detail,meta:{title:详情},props(\(route){return {id:\)route.query.id,title:$route.query.title,}}}]}]}] })//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用 router.afterEach((to,from){console.log(后置路由守卫,to,from)document.title to.meta.title || 硅谷系统 })//导出路由器 export default router 组件内路由守卫 templateh2我是About组件的内容/h2 /templatescriptexport default {name:About,//通过路由规则离开该组件时被调用beforeRouteEnter (to, from, next) {console.log(About–beforeRouteEnter,to,from)if(localStorage.getItem(school)atguigu){next()}else{alert(学校名不对无权限查看)}},//通过路由规则离开该组件时被调用beforeRouteLeave (to, from, next) {console.log(About–beforeRouteLeave,to,from)next()}} /script 总结 作用对路由进行权限控制分类全局守卫、独享守卫、组件内守卫 全局守卫 //全局前置守卫初始化时执行、每次路由切换前执行 router.beforeEach((to,from,next){console.log(beforeEach,to,from)if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制if(localStorage.getItem(school) atguigu){ //权限控制的具体规则next() //放行}else{alert(暂无权限查看)}}else{next() //放行} })//全局后置守卫初始化时执行、每次路由切换后执行 router.afterEach((to,from) {console.log(afterEach,to,from)if(to.meta.title){ document.title to.meta.title //修改网页的title}else{document.title vue_test} }) 独享守卫 beforeEnter(to,from,next){console.log(beforeEnter,to,from)if(localStorage.getItem(school) atguigu){next()}else{alert(暂无权限查看)} }组件内守卫 //进入守卫通过路由规则进入该组件时被调用 beforeRouteEnter (to, from, next) {…}, //离开守卫通过路由规则离开该组件时被调用 beforeRouteLeave (to, from, next) {…},路由器的两种工作模式 对于一个url来说什么是hash值—— #及其后面的内容就是hash值 hash值不会包含在 HTTP 请求中即hash值不会带给服务器 hash模式 地址中永远带着#号不美观 若以后将地址通过第三方手机app分享若app校验严格则地址会被标记为不合法 兼容性较好
history模式 地址干净美观兼容性和hash模式相比略差应用部署上线时需要后端人员支持解决刷新页面服务端404的问题