网站建设具体流程wordpress ajax登录页面

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

网站建设具体流程,wordpress ajax登录页面,苏州网站制作网站建设,免费行情网站在线文章目录 路由1. 基本使用2. 多级(嵌套)路由3. 路由query传参4. 命名路由5. 路由param传参6. propos属性7. replace属性8. 编程式路由导航9. 缓存路由组件10. actived#xff0c;deactived生命周期函数11. 路由守卫1、全局路由2、独享路由3、组件内路由守卫 12. 路由器工作的两… 文章目录 路由1. 基本使用2. 多级(嵌套)路由3. 路由query传参4. 命名路由5. 路由param传参6. propos属性7. replace属性8. 编程式路由导航9. 缓存路由组件10. activeddeactived生命周期函数11. 路由守卫1、全局路由2、独享路由3、组件内路由守卫 12. 路由器工作的两种模式 路由 路由就是一组key-value的对应关系 前端路由 key是路径value是组件component用于展示页面内容后端路由 key是路径value是函数。后端根据请求路径找到匹配的函数处理请求。 多个路由需要经过路由器的管理。路由主要应用于SPA(Single page web application)应用

1. 基本使用 1、安装路由 vue2npm i vue-router3 vue3: npm i vue-router4 2、编写路由器文件src/router/index.js // 该文件专门用于创建整个应用的路由器 import VueRouter from vue-router // About和Home都是路由组件所以放在文件src/pages下一般组件则放在src/components里 import About from ../pages/About import Home from ../pages/Home// 创建并暴露一个路由器 export default new VueRouter({routes: [{path: /about,component: About},{path: /home,component: Home}] })main.js import VueRouter from vue-router import router from ./router/index Vue.use(VueRouter) new Vue({// 将App组件放入容器中render: h h(App),// 添加router配置项router, }).\(mount(#app) // 挂载容器3、实现切换(active-class可配置高亮) router-link标签实现路由组件的切换to...表示要切换的路径根据路径对应到上边js文件中的路由组件。router-link本质上是a标签。 router-link classlist-group-item to./home active-classactiveHome/router-linkrouter-link classlist-group-item to./about active-classactive About/router-link4、指定路由组件展示的位置 router-view/router-viewrouter-link选择要展示哪个路由组件将路由组件展示在router-view指定的位置中 注意 路由组件通常存放在pages文件夹一般组件通常存放在components文件夹。 通过切换“隐藏”了的路由组件默认是被销毁掉的需要的时候再去挂载。 每个路由组件都有自己的\)route属性里面存储着自己的路由信息。非路由组件也有\(route属性其显示的是当前路由组件的一些信息。比如非路由组件Banner 整个应用只有一个router(即About的router和Home的router是一回事)可以通过组件\)router属性获取到。 // 代码验证 // About组件 mounted () {console.log(About路由组件挂载);window.aboutRoute this.\(routewindow.aboutRouter this.\)router }, // Home组件 mounted () {console.log(Home路由组件挂载);window.aboutRoute this.\(routewindow.aboutRouter this.\)router },项目中有多个router-link与router-view时点击链接到底跳转到哪一个router-view显示 参考博客Vue中router-link与router-view的对应关系和映射特点
2. 多级(嵌套)路由 要实现的效果 Home组件里多了两个组件News和Message routes:[{path:/about,component:About,},{path:/home,component:Home,children:[ //通过children配置子级路由{path:news, //此处一定不要写/newscomponent:News},{path:message,//此处一定不要写/messagecomponent:Message}]} ]跳转路径 router-link to/home/newsNews/router-link由于子级路由在Home组件里所以Home组件里有两个router-link,分别是News和Message。且Home组件里有一个router-view用来展示路由组件News或Message的内容。图中的消息1消息2是点击Message展示的消息。所以消息1消息2是Message组件里的内容 !–Home.vue文件– templatedivrouter-link to/home/news active-classactiveNews/router-linkrouter-link to/home/message active-classactiveMessage/router-link!– 展示组件内容的位置 – router-view/router-view /div /template !–Message.vue文件– templatedivullia href/message1message001/anbsp;nbsp;/lilia href/message2message002/anbsp;nbsp;/lilia href/message/3message003/anbsp;nbsp;/li/ul/div /template3. 路由query传参 实现效果 Message组件里嵌套Detail组件点击不同的消息时将参数传递给Detail组件Detail组件展示内容。 传递参数 !–Message.vue组件– ulli v-form in message :keym.id!– 跳转路由并携带参数to的字符串写法 –router-link :to/home/message/detail?id\({m.id}title\){m.title}{{m.title}}/router-link !– 跳转路由并携带参数to的对象写法 –router-link:to{path: /home/message/detail,query: {id: m.id,title: m.title,}}{{ m.title }}/router-link/li /uldiv!– Deatil组件展示在这儿 –router-view/router-view/div接收数据 !–Detail.vue组件–li消息编号:{{ \(route.query.id }}/lili消息标题{{ \)route.query.title }}/li4. 命名路由 1、作用跳转时简化编码否则嵌套路由多了路径很长 2、给路由命名 // 给谁起名字就要把name写在谁的配置项里 routes: [{path: /home,component: Home,children: [{path: message, component: Message,children: [{ name: xiangqing, path: detail, component: Detail }]}]}]3、简化跳转 !–简化前–router-link to/home/message/detail跳转/router-link !–简化后– router-link :to{name:xiangqing}跳转/router-link !–简化后携带参数– router-link:to{name: xiangqing,query: {…},} 跳转/router-link5. 路由param传参 1、配置占位符声明接收param参数 {path: message, component: Message,children: [// 配置占位符;占位的时候用的titleid用params取参数的时候就能用titleid{ name: xiangqing, path: detail/:id/:title, component: Detail }]}2、传递参数 !– 跳转路由并携带参数to的字符串写法 – router-link :to/home/message/detail/\({m.id}/\){m.title}跳转/router-link !– 跳转路由并携带参数to的对象写法 – router-link:to{name: xiangqing,params: {id: m.id,title: m.title,},} 跳转/router-link注使用to的对象写法时传参用params时只能用name而不能用path指定路径 3、接收参数 \(route.params.id\)route.params.title6. propos属性 组件中每次读取路由参数时都是 \(route.params... propos属性的作用是少写重复项让路由组件更方便的接收到参数。 接收参数的组件设置propos属性 {name:xiangqing,path:detail/:id/:title,component:Detail,//第一种写法props值为对象该对象中所有的key-value的组合最终都会通过props传给Detail组件// 缺点传递的是死数据// props: { a: 1, b: hello }//第二种写法props值为布尔值布尔值为true则把路由收到的所有params参数通过props传给Detail组件// props:true//第三种写法props值为函数该函数返回的对象中每一组key-value都会通过props传给Detail组件,通过propos接收参数时不需要占位符了props(\)route){return {id:\(route.query.id,title:\)route.query.title}} }Detail组件接收参数 li消息编号:{{ id }}/li li消息标题{{ title }}/li … props: [id, title]7. replace属性 作用路由跳转时操作浏览器历史记录的模式浏览器历史记录有两种写入方式分别为push追加历史记录replace替换当前记录。路由跳转时默认为push开启replace模式:router-link replace…News/router-link
3. 编程式路由导航 作用不借助router-link实现路由跳转让路由跳转更加灵活实现路由条件可以采用\(router下的几个API //\)router的两个主要API this.\(router.push({name: xiangqing,query: {id: m.id,title: m.title} })this.\)router.replace({name: xiangqing,query: {id: m.id,title: m.title} }) // 类似于历史记录的前进后退 this.\(router.forward() //前进 this.\)router.back() //后退 this.$router.go() //可前进也可后退比如 历史记录默认记录方式为push所以依次点击 About - Home - News - Message - 消息1的push查看 - 消息2的replace查看 - 消息3的replace查看 历史记录存储的是 前进后退和go都是根据这个历史记录的顺序来进行跳转。比如点后退则页面变成/home/messages页面
4. 缓存路由组件 作用keep-alive 标签让不展示的路由组件保持挂载、不被销毁标签里的include属性可用来指定缓存哪个路由组件 语法 !– 如果不指定则在这里展示的路由组件都被缓存 – keep-alive router-view/router-view /keep-alive !– 缓存多个 – keep-alive :include[News, Message]router-view/router-view /keep-alive !– 缓存一个 – keep-alive includeNewsrouter-view/router-view /keep-alive当缓存News组件时由News组件切换到Message组件。News组件不会被销毁。 //这个函数不执行则证明不会被销毁 beforeDestroy () {alert(News组件即将被销毁); }注意点: 1 include里写的是组件名即创建组件时定义的name属性 2注意/keep-alive要加在哪里 想要缓存News组件则应该加载News路由组件展示的区域
   
5. activeddeactived生命周期函数 这两个是路由组件独有的生命周期钩子用于捕获路由组件的激活状态 actived路由组件被激活时触发。deactived路由组件失活时触发。 比如News组件里的某句话加一个透明度样式设置采用定时器透明度不断发生变化。当切换为其他组件时透明度不再变化切换回来时透明度继续发生变化。 如果采用之前的mounted和beforeDestroy函数 li :style{ opacity }透明度变化/li script data () {return {opacity: 1}},mounted () {this.timer setInterval(() {console.log();this.opacity - 0.01if (this.opacity 0) {this.opacity 1}}, 16)},beforeDestroy () {clearInterval(this.timer)}, /script但是当News组件设置了缓存即使切换为别的组件News组件也不会被销毁所以计时器仍旧在运行透明度仍旧在变化。 这种情况下采用actived和deactived十分合适。 activated () {this.timer setInterval(() {console.log();this.opacity - 0.01if (this.opacity 0) {this.opacity 1}}, 16)},deactivated () {clearInterval(this.timer)},11. 路由守卫 路由器文件router/index.js const router new VueRouter({routes: [{name: guanyu,path: /about,component: About,meta: { isAuth: false, title: 关于 }},{name: zhuye,path: /home,component: Home,meta: { isAuth: false, title: 主页 },children: [{ name: xinwen, path: news, component: News, meta: { isAuth: true, title: 新闻 }, },{name: xiaoxi, path: message, component: Message, meta: { isAuth: true, title: 消息 },}]}] })给每个路由的meta配置项存放了key-value键值对 1、全局路由 beforeEach()每次路由切换之前都会调用这个函数函数里进行一些逻辑处理判断是否可以跳转之类的afterEach():每次路由切换之后被调用可用来修改标签页的标题。meta在这个属性里配置isAuth,方便判断是否要对该路由进行权限控制 // 全局前置路由守卫–初始化的时候被调用每次路由切换之前被调用 router.beforeEach((to, from, next) {console.log(全局前置路由守卫,to, from); if (to.meta.isAuth) {if (localStorage.getItem(school) atguigu) {next() //放行若不调用这个函数则不进行路由切换} else {alert(学校名不对无权限查看);}} else {next()} }) // 全局后置路由守卫–初始化的时候被调用每次路由切换之后被调用 router.afterEach((to, from) {console.log(全局后置路由守卫);console.log(to, from);document.title to.meta.title || 硅谷系统 })2、独享路由 beforeEnter()给某一个路由单独配置 {name: xinwen, path: news, component: News, meta: { isAuth: true, title: 新闻 },beforeEnter (to, from, next) {if (to.meta.isAuth) {if (localStorage.getItem(school) atguigu) {next()} else {alert(学校名不对无权限查看);}} else {next()}}, },3、组件内路由守卫 全局和独享路由守卫都是在路由配置文件里写组件内路由守卫是在对应的组件内写 // About.vue //进入守卫通过路由规则进入该组件之前被调用 beforeRouteEnter (to, from, next) {console.log(About–beforeRouteEnter);console.log(to, from);next() }, //进入守卫通过路由规则离开该组件时之前beforeRouteLeave (to, from, next) {console.log(About–beforeRouteLeave);console.log(to, from);next() }注意是通过路由规则进入该组件时这两个函数才会被调用 不通过路由规则进入该组件的情况比如作为一般组件直接被调用
   
6. 路由器工作的两种模式 1、hash模式 hash值对于一个url来说路径中#后边的内容统称为hash值。hash值不会包含在 HTTP 请求中即hash值不会带给服务器。 hash模式 地址中永远带着#号兼容性较好刷新页面时hash值不会包含在请求里所以刷新页面发送请求不会出错。但若以后将地址通过第三方手机app分享若app校验严格则地址会被标记为不合法。 2、history模式 地址中没有#号兼容性略差应用部署上线时需要后端人员支持解决刷新页面服务端404的问题。刷新页面时整个url都会发给服务器会报404错误 3、设置模式 //index.js默认是hash模式 const router new VueRouter({mode: history,… })拓展 项目打包npm run build 打包就是将vue文件转为基本的cssjshtml等浏览器认识的文件。