网站做两个月百度没有录取,海州区建设局网站,wordpress 下载插件xydown,东莞市官网网站建设平台一、路由简介 路由#xff08;route#xff09;就是一组 key-value 的对应关系多个路由#xff0c;需要经过路由器#xff08;router#xff09;的管理 在 Vue 中也有路由#xff0c;Vue 中的路由主要是通过 vue-rounter 这个插件库来实现#xff0c;它的作用就是专门用…一、路由简介 路由route就是一组 key-value 的对应关系多个路由需要经过路由器router的管理 在 Vue 中也有路由Vue 中的路由主要是通过 vue-rounter 这个插件库来实现它的作用就是专门用来实现 SPA 应用的。 对 SPA 应用的理解 单页 Web 应用single page web applicationSPA整个应用只有一个完整的页面点击页面中的导航链接不会刷新页面只会做页面的局部更新数据需要通过 Ajax 请求获取 二、路由的基本使用 注意事项 路由组件通常存放在 pages 文件夹一般组件通常存放在 components 文件夹通过切换隐藏了路由组件默认是被销毁的需要的时候再去挂载每个组件都有自己的 $route 属性里面存储着自己的路由信息整个应用只有一个 router 路由器可以通过组件的 $router 属性获取到   1- 安装 并引入 vue-router Vue 2安装 vue-router 3Vue 3安装 vue-router 4 我们现在学习所用的 Vue 的版本是 2 版本所以我们需要使用如下命令安装 vue-router 3           npm install vue-router3 在 /src/router/index.js 中创建整个应用的路由器 // 该文件专门用于创建整个路由器 import VueRouter from vue-router// 引入组件 import About from ../pages/About import Home from ../pages/Home// 创建并暴露一个路由器 export default new VueRouter({routes:[{path:/about,component:About},{path:/home,component:Home}] })在 src/main.js 中引入和使用该插件  vue-router   步骤 1和 1-1 在 src/main.js 中引入路由器并添加暴露出来步骤 2 和 3 import Vue from vue import App from ./App.vue// 1- 引入 vue-router import VueRouter from vue-router // 2-引入路由器 import router from ./router// 1-1应用 vue-router Vue.use(VueRouter)Vue.config.productionTip falsenew Vue({render: h h(App),// 3-在 vm 中添加路由器router:router }).$mount(#app)APP组件中    router-link 配置跳转连接 router-link 最终会在 vue-router 的作用下转换为 a 标签 router-view/router-view 标签展示页面 以及 active-classactive  完成下面的效果 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!-- a classlist-group-item active href./about.htmlAbout/aa classlist-group-item href./home.htmlHome/a --!--1 -router-link 标签实现切换--router-link classlist-group-item active-classactive to/aboutAbout/router-linkrouter-link classlist-group-item active-classactive to/homeHome/router-link /div/divdiv classcol-xs-6div classpaneldiv classpanel-body!--2 -router-view 标签完成展示--router-view/router-view/div/div/div/div/div /templatescriptexport default {name: App, }; /scriptstyle langcss/style./src/pages 文件夹下面新建About组件 和Home组件2个一样 templatedivh2我是About的内容/h2/div /templatescript export default {name:About }/scriptstyle/style 三、嵌套路由 完成如下效果在Home组件下面添加子路由 src\router\index.js  配置多级路由如下 1 、2处 注意 children 属性配置多级路由一级路由后面的二级路由、三级路由等前面都不需要添加斜 // 该文件专门用于创建整个路由器 import VueRouter from vue-router// 引入组件 import About from ../pages/About import Home from ../pages/Homeimport Message from ../pages/Message import News from ../pages/News// 创建并暴露一个路由器 export default new VueRouter({routes: [{path: /about,component: About},{path: /home,component: Home,// 1- 通过children 配置子级路由children: [{path: message, //2 一级路由后面的二级路由、三级路由等前面都不需要添加斜杆/component: Message},{path: news,component: News},]}] })Home组件下面代码如下 注意 to/home/news  要匹配到 路由 templatedivdivh2Home组件内容/h2divul classnav nav-tabs!--1- router-link 配置路由 注意 to/home/news --lirouter-link classlist-group-item active-classactive to/home/newsNews/router-link/lilirouter-link classlist-group-item active-classactive to/home/messageMessage/router-link/li/ul!-- 2- router-view 展示页面--router-view/router-view/div/div/div /templatescript export default {name: Home, }; /scriptstyle /style Message 、News组件 如下 templatedivullia href/message1message001/anbsp;nbsp;/lilia href/message2message002/anbsp;nbsp;/lilia href/message/3message003/anbsp;nbsp;/li/ul/div /templatescript export default {name:Message }; /script四、路由的query传参 message 组件像detail传递参数 2种写法 模板字符串写法对象写法 templatedivulli v-form in messageLsit :keym.id!-- 1- to传递参数 字符串写法一--router-link :to/home/message/detail?id${m.id}title${m.title}{{ m.title }}/router-link nbsp;!-- 1- to传递参数 对象写法 写法二--router-link :to{path:/home/message/detail, query:{id:m.id,title:m.title}}{{m.title}}/router-link/li/ulrouter-view/router-view/div /templatescript export default {name: Message,data() {return {messageLsit: [{ id: 001, title: message1 },{ id: 002, title: message2 },{ id: 003, title: message3 },],};}, }; /scriptdetail 接受参数   $route 中获取 templatedivul!-- 接受参数 --li消息编号{{ $route.query.id }}/lili消息内容{{ $route.query.title }}/li/ul/div /templatescript export default {name:Detail } /scriptstyle/style 五、命名路由 给路由设置name属性命名 // 该文件专门用于创建整个路由器 import VueRouter from vue-router// 引入组件 import About from ../pages/About import Home from ../pages/Homeimport Message from ../pages/Message import News from ../pages/Newsimport Detail from ../pages/Detailexport default new VueRouter({routes: [{// 1- 给about路由命名name:guanyu,path: /about,component: About},{path: /home,component: Home,children: [{path: message, component: Message,children: [{ path: detail,component: Detail}]},{path: news,component: News},]}] })跳转处写法 !--1 -router-link 标签实现切换--router-link classlist-group-item active-classactive :to{name:guanyu}About/router-link 六、路由的params参数 params 传递参数的2种写法 1- 模板字符串 2- 对象写法 注意 path 会报错只能用name 去跳转 templatedivulli v-form in messageLsit :keym.id!-- 1- params 传递参数 字符串写法--router-link :to/home/message/detail/${m.id}/${m.title}{{ m.title }}/router-link nbsp;!-- 2- params传递参数 对象写法 写法二 此处只能用name--router-link :to{name:xiangqing, params:{id:m.id,title:m.title}} {{m.title}}/router-link/li/ulrouter-view/router-view/div /templatescript export default {name: Message,data() {return {messageLsit: [{ id: 001, title: message1 },{ id: 002, title: message2 },{ id: 003, title: message3 },],};}, }; /scriptsrc\router\index.js 路由文件的写法 // 该文件专门用于创建整个路由器 import VueRouter from vue-router // 引入组件 import About from ../pages/About import Home from ../pages/Home import Message from ../pages/Message import News from ../pages/News import Detail from ../pages/Detail export default new VueRouter({routes: [{name:guanyu,path: /about,component: About},{path: /home,component: Home,children: [{path: message, component: Message,children: [{ //1- params 参数定义name:xiangqing,//2- 声明占位 传递参数path: detail/:id/:title,component: Detail}]},{path: news,component: News},]}] })Detail组件接受参数 li消息编号{{ $route.params.id }}/lili消息内容{{ $route.params.title }}/li 七、路由的 props 配置 作用让路由组件更方便收到值 写法一只能配置并传递固定数据写法二只能接收路由传递过来的 params 参数写法三灵活性最大可以通过 $route 来传递 query 或者 params 参数 src\router\index.js 文件中 props 三种写法 // 该文件专门用于创建整个路由器 import VueRouter from vue-router // 引入组件 import About from ../pages/About import Home from ../pages/Home import Message from ../pages/Message import News from ../pages/News import Detail from ../pages/Detail export default new VueRouter({routes: [{name: guanyu,path: /about,component: About},{path: /home,component: Home,children: [{path: message,component: Message,children: [{name: xiangqing,path: detail/:id/:title,component: Detail,//1- props 第一种写法 传递对象// props:{a:100,b:message100}//2-props 第二种写法 布尔值为真把路由收到params参数按照props传给组件// props: true// 第三种写法props 值为函数该函数返回的对象中每一组 key-value 都会通过 props 传给 Detail 组件// query传参// router-link :to{// name:xiangqing, // query:{// id:m.id,// title:m.title// }// } {{m.title}}/router-linkprops($route) {return {id: $route.query.id,title: $route.query.title,}}}]},{path: news,component: News},]}] })Detail 接受参数的写法 templatedivul!-- 3- param 接受参数 --li消息编号{{id }}/lili消息内容{{title }}/li!-- li路由props对像 {{ a }}/lili路由props对像 {{ b }}/li --/ul/div /templatescript export default {name:Detail,//1-// props:[a,b]//2-props:[id,title] } /scriptstyle/style 八、router-link 的 replace 属性 作用控制路由跳转时操作浏览器历史记录的模式 浏览器的历史记录有两种写入方式 push 是追加历史记录replace 是替换当前历史记录路由跳转时默认是 push 开启replace 模式 router-link replace …News/router-link 九、编程式路由导航 作用不借助 router-link 实现路由跳转让路由跳转更加灵活 message组件编写按钮跳转路由 借助this.$router 中的提供的api实现如下 1、 2 代码处 templatedivulli v-form in messageLsit :keym.id!-- router-link :to/home/message/detail/${m.id}/${m.title}{{ m.title }}/router-link nbsp; --router-link:to{name: xiangqing,query: {id: m.id,title: m.title,},}{{ m.title }}/router-link!-- 1- 编写按钮 --button clickshowPush(m)push查看/buttonbutton clickshowReplace(m)replace查看/button/li/ulrouter-view/router-view/div /templatescript export default {name: Message,data() {return {messageLsit: [{ id: 001, title: message1 },{ id: 002, title: message2 },{ id: 003, title: message3 },],};},methods:{//2- this.$router.push this.$router.replace 实现跳转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 路由器中还有如下的 API 可供我们前进和回退浏览器器历史记录 this.$router.forward()    // 前进this.$router.back()        // 后退this.$router.go(num)    // 前景或后退   templatedivdiv classcol-xs-offset-2 col-xs-8div classpage-headerh2Vue Router Demo/h2/div/divbutton clickfroward前进/buttonbutton clickback后退/buttonbutton clickgotest go/button/div /templatescript export default {name:Banner,methods:{froward(){this.$router.forward() // 前进},back(){this.$router.back() // 后退},go(){this.$router.go(-2) // 传入正数 往前跳转几页负数往后跳转几页}} } /scriptstyle/style 十、缓存路由组件 作用让不展示的路由组件保持挂载不被销毁 keep-alive 中不添加 include那么将使得挂载到 router-view 中路由每次切换时都不会被销毁keep-alive 的 include 的参数值为组件名而不是路由名如果想要缓存多个组件那么 include 里面的路由需要写成数组形式例如 :include[News, Message] keep-alive includeNews router-view/router-view /keep-alive 多个 keep-alive :include[News, Message]router-view/router-view/keep-alive 十一、路由的钩子函数 作用路由组件所独有的两个钩子函数用于捕获路由组件的激活状态 activated路由组件被激活时触发deactivated路由组件失活时触发 templatedivullinews001input typetext //lilinews002input typetext //lilinews003input typetext //lili :style{opacity}VUE生命周期/li/ul/div /templatescript export default {name: News,data() {return {opacity:1}},activated() {//1- 组件被激活时this.timeer setInterval(() {console.log(还在执行。。。。。);this.opacity - 0.01;if (this.opacity 0) {this.opacity 1;}})},//2- 组件失活时deactivated() {clearInterval(this.timeer)}, }; /script十二、路由守卫 1.全局守卫 1-  router.beforeEach((to, from, next) {…})全局前置守卫配置 to目标路由from源路由next是一个回调函数对后续的执行操作起着拦截或放行的作用 2- router.afterEach((to, from) {…})全局后置守卫配置 to目标路由from源路由 使用场景 前置守卫适用于路由改变前的操作可以根据权限判断是否展示对应路由的信息后置守卫适用于路由改变后的操作可以根据是否进入对应路由来执行相应的操作 下面展示点单DEMO  如 1、2、3处代码  // 该文件专门用于创建整个路由器 import VueRouter from vue-router // 引入组件 import About from ../pages/About import Home from ../pages/Home import Message from ../pages/Message import News from ../pages/News import Detail from ../pages/Detail const router new VueRouter({routes: [{name: guanyu,path: /about,component: About,meta:{isAuth:false, //1- 用于表示该路由是否需要进行权限判断}},{name:zhuye,path: /home,component: Home,children: [{path: message,component: Message,children: [{name: xiangqing,path: detail/:id/:title,component: Detail,props($route) {return {id: $route.query.id,title: $route.query.title,}}}]},{path: news,component: News},]}] })// 2-全局前置路由守卫 —— 初始化的时候被调用以及每次路由切换的时候都会调用一次 router.beforeEach((to, from, next) {console.log(前置守卫, to, from)if(to.meta.isAuth) { // 判断是否需要授权if(localStorage.getItem(school) atguigu) {next()} else {alert(学校名不对无权查看)}} else {next() // 不需要判断权限的路由直接放行} })// 3-全局后置路由守卫 router.afterEach((to, from) { // 该配置是为了每次路由跳转的时候进行标签名的更新console.log(后置路由守卫, to, from);if(to.meta.title) {document.title to.meta.title // 如果 meta 中配置了路由的 title那么就修改} else {document.title vue-test} })export default router; 2.独享路由守卫 作用只对单个路由进行的守卫 独享路由守卫的配置函数为beforeEnter((to, from, next) {…}) 是在 route 中进行配置。 如图代码1处 // 该文件专门用于创建整个路由器 import VueRouter from vue-router // 引入组件 import About from ../pages/About import Home from ../pages/Home import Message from ../pages/Message import News from ../pages/News import Detail from ../pages/Detail const router new VueRouter({routes: [{name: guanyu,path: /about,component: About,meta:{isAuth:false, }},{name:zhuye,path: /home,component: Home,children: [{path: message,component: Message,children: [{name: xiangqing,path: detail/:id/:title,component: Detail,props($route) {return {id: $route.query.id,title: $route.query.title,}}}]},{path: news,component: News,//1-独享路由守卫beforeEnter(to, from, next) {console.log(独享路由守卫, to, from)if(to.meta.isAuth) { // 判断是否需要授权if(localStorage.getItem(school) atguigu) {next()} else {alert(学校名不对无权查看)}} else {next() // 不需要判断权限的路由直接放行}}},]}] })export default router; 3. 组件内路由守卫 作用主要针对组件而言在组件之间切换时触发的守卫 // 进入守卫通过路由规则进入该组件时被调用 beforeRouteEnter(to, from, next) {},// 离开守卫通过路由规则离开该组价时被调用 beforeRouteLeave(to, from, next) {}, templatedivh2我是About的内容/h2/div /templatescript export default {name: About,//1- 进入守卫通过路由规则进入该组件时被调用beforeRouteEnter(to, from, next) {console.log(组件内路由守卫, to, from);if (to.meta.isAuth) {if (localStorage.getItem(school) atguigu) {next();} else {alert(学校名不对无权查看);}} else {next(); // 不需要判断权限的路由直接放行}},// 2- 离开守卫通过路由规则离开该组价时被调用beforeRouteLeave(to, from, next) {}, }; /scriptstyle /style 十三、路由工作模式 hash、history 1、路由器存在两种工作模式 history 模式hash 模式 对于一个 url 来说hash 指的就是 # 后面的内容hash 值不会包含在 HTTP 请求中即 hash 值不会带给服务器  特点 1-hash 模式默认 地址中永远带这 # 号不美观 若以后将地址通过第三方手机 app 分享若 app 检验严格则地址会被标记为不合法 2-history 模式地址干净、美观兼容性和 hash 模式相比略差 应用部署上线时需要后端人员支持解决刷新页面服务器 404 的问题一般 nginx 解决   1- 修改模式方法 在创建路由器 router 对象实例中添加 mode:history 或者 mode:hash 来将路由模式修改为 history 或 hash 模式 const router new VueRouter({mode:history,routes: […] })2、打包测试 了演示 hash 模式下hash 值不会带给服务器我们需要将之前制作的 SPA 进行打包打包命令如下          npm run build 稍事等待待打包完毕后生成的文件在 /dist 文件夹中生成的目录结构如下 dist                                  ├─ css                                │  └─ bootstrap.css                   ├─ js                                 │  ├─ app.adc4f030.js                 │  ├─ app.adc4f030.js.map             │  ├─ chunk-vendors.7c6bdce6.js       │  └─ chunk-vendors.7c6bdce6.js.map   ├─ favicon.ico                        └─ index.html                           上面打包文件直接打开 index.html 肯定是浏览器不了的需要将打包的文件放到服务器中服务才能运行所以我们现在来使用 node.js 和 express 来编写一个服务器 1-安装 express 框架npm i express 2-编写一个服务器主文件 /server.js const express require(express) // 使用 common.js 的语法来引入 express 框架 // 创建 app 服务实例对象 const app express() // 指定静态资源 app.use(express.static(__dirname /static)) // 搭建路由 app.get(demo, (req, res) {res.send({name:tom,age:18,}) })app.listen(5005, (err) {if(!err) {console.log(服务器启动成功);} })新建一个 static 文件夹用于存放静态资源将生成好的 dist 文件夹中的内容放置到 static 中 启动服务器node server 在浏览器中输入 localhost:5005 打开部署好的页面 history 404问题 如果面对 history 模式我们也有自己的解决方法首先去 npm 包管理平台 下载 connect-history-api-fallback或者使用如下命令安装                 npm i connect-history-api-fallback const history require(connect-history-api-fallback)// 注释使用 history 的时机需要在创建 app 实例之后在挂载静态资源之前 app.use(history())