怎么上传网站数据库wordpress 文章点赞插件

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

怎么上传网站数据库,wordpress 文章点赞插件,做封面的网站,怎样查看网站是用什么cms_做的什么是路由? 一个路由就是一组映射关系#xff08;key - value#xff09;key 为路径#xff0c;value 可能是 function 或 component 2、安装\引入\基础使用 只有vue-router3#xff0c;才能应用于vue2#xff1b;vue-router4可以应用于vue3中 这里我们安装vue-router3… 什么是路由? 一个路由就是一组映射关系key - valuekey 为路径value 可能是 function 或 component 2、安装\引入\基础使用 只有vue-router3才能应用于vue2vue-router4可以应用于vue3中 这里我们安装vue-router3npm i vue-router3 引入vue-router在入口js中引入import VueRouter from vue-router vue.use(VueRouter)   多级路由 即是由多个路由相互嵌套而形成的 Banner作为title直接在App.vue中实现 然后是About和Home作为路由组件在App.vue中。 message和news继而继续嵌套在home中 main.js import Vue from vue import App from ./App.vue//引入VueRouter 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 classrowBanner//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 /templatescript import Banner from ./components/Banner.vueexport default {name:App,components:{Banner,}} /scriptrouter/index.js //该文件专门应用于创建整个应用的路由器 import VueRouter from vue-router//引入组件 import About from ../pages/About import Home from ../pages/Home import News from ../pages/News import Message from ../pages/Messageconst router new VueRouter({routes:[{path:/about,component:About},{path:/home,component:Home,children:[{path:news,component:News,},{path:message,component:Message,}]}] })export default router Banner.vue templatediv classcol-xs-offset-2 col-xs-8div classpage-headerh2Vue Router Demo/h2/div/div /templatescript export default {name:Banner } /scriptstyle/style About.vue templateh2我是About的内容/h2 /templatescript export default {name:About} /scriptHome templatedivh2Home组件内容/h2divul classnav nav-tabslirouter-link classlist-group-item active-classactive to/home/newsNews/router-link/lilirouter-link classlist-group-item active-classactive to/home/messageMessage/router-link/li/ululrouter-view/router-view/ul/div/div/templatescriptexport default {name:Home} /scriptmessage templatedivdivullia href/message1message001/anbsp;nbsp;/lilia href/message2message002/anbsp;nbsp;/lilia href/message/3message003/anbsp;nbsp;/li/ul/div/div /templatescript export default {name:Mesage, } /scriptstyle/style news templateullinews001/lilinews002/lilinews003/li/ul /templatescript export default {name:News, } /scriptstyle/style query的传参 若是有很多的嵌套的情况下一直如上嵌套是不现实的所以可以通过传参的方法将需要传递的参数直接带到下一个页面中 下例即是在message下继续嵌套 index.js引入继续嵌套的detail //该文件专门应用于创建整个应用的路由器 import VueRouter from vue-router//引入组件 import About from ../pages/About import Home from ../pages/Home import News from ../pages/News import Message from ../pages/Message import Detail from ../pages/Detailconst router 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,}]}]}] })export default router message传递query参数 templatedivdivulli 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-link/li/ulhrrouter-view/router-view/div/div /templatescript export default {name:Mesage,data(){return{messageList:[{id:001,title:消息001},{id:002,title:消息002},{id:003,title:消息003},]}} } /scriptstyle/style detail接收参数 templateulli消息编号:{{\(route.query.id}}/lili消息标题:{{\)route.query.title}}/li/ul /templatescript export default {name:Detail,mounted(){console.log(this.\(route)}} /scriptstyle/style replace  类似于无痕浏览即当前的router-link标签若加上了这个则当前对该标签的操作是不可追回的 App。vue templatedivdiv classrowBanner//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 replace classlist-group-item active-classactive to/about About/router-linkrouter-link replace 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 /templatescript import Banner from ./components/Banner.vueexport default {name:App,components:{Banner,}} /scriptactivated和deactivated 这是路由组件中两个独有的生命周期钩子用于捕获路由组件的生命周期状态 具体使用 activated路由组件被激活时触发deactivated路由组件失活时触发 News templateullinews001 input typetext/lilinews002 input typetext/lilinews003 input typetext/li/ul /templatescript export default {name:News,data(){return{opacity:1}},activated(){console.log(News组件被激活了)},deactivated(){console.log(News组件失活了)} } /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//创建并暴露一个路由器 const router new VueRouter({routes:[{name:guanyu,path:/about,component:About},{name:zhuye,path:/home,component:Home,children:[{name:xinwen,path:news,component:News,meta:{isAuth:true}},{name:xiaoxi,path:message,component:Message,meta:{isAuth:true},children:[{name:xiangqing,path:detail,component:Detail,props(\)route){return {id:\(route.query.id,title:\)route.query.title,}}}]}]}] })//全局前置路由守卫–初始化时被调用每次路由切换之前被调用 router.beforeEach((to,from,next){console.log(to,from)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem(school)atguigu){next()}else{alert(学校名不对无权限查看)}}else{next()} })export default 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//创建并暴露一个路由器 const router new VueRouter({routes:[{name:guanyu,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)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem(school)atguigu){next()}else{alert(学校名不对无权限查看)}}else{next()} })//全局后置路由守卫--初始化时被调用每次路由切换之后被调用 router.afterEach((to,from){console.log(后置路由守卫,to,from)document.titleto.meta.title })export default 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//创建并暴露一个路由器 const router new VueRouter({routes:[{name:guanyu,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:新闻},beforeEnter: (to, from, next) {console.log(前置路由守卫,to,from)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem(school)atguigu){next()}else{alert(学校名不对无权限查看)}}else{next()}}},{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) // if(to.meta.isAuth){ //判断是否需要鉴权 // if(localStorage.getItem(school)atguigu){ // next() // } // else{ // alert(学校名不对无权限查看) // } // } // else{ // next() // } // })// //全局后置路由守卫–初始化时被调用每次路由切换之后被调用 // router.afterEach((to,from){ // console.log(后置路由守卫,to,from) // document.titleto.meta.title // })export default router