深圳公司设计网站,外贸电商平台都有哪些,怎么做网站界面分析,处方药可以做网站宣传吗前端路由 问题导入 在前面完成的资产管理案例中#xff0c; 我们是把列表区域和添加表单区域实现在了一个区域。当页面功能比较复杂时#xff0c;我们需要它们拆分开来#xff1a;一个页面中只显示一个区域。 一个比较直观的解决方案是把它们分别做成两个独立的网页文件 我们是把列表区域和添加表单区域实现在了一个区域。当页面功能比较复杂时我们需要它们拆分开来一个页面中只显示一个区域。 一个比较直观的解决方案是把它们分别做成两个独立的网页文件例如 文件一 xxxx/index.html 显示表格区区域 文件二xxxx/add.html显示表单区域 然后添加一个导航条来允许用户进行跳转。 这种解决方案比较直接了当但它存在一些问题 从一个页面跳入另一个页面需要重新加载公共的资源文件造成浪费。例如index.html中需要用到axios.js在add.html中也需要用到。页面的跳入跳出给用户的体验也不好特别地是在移动端。 那有没有一种方案在不进行页面跳转的前提下能根据地址栏中的地址不同来显示不同的内容 有这就是前端路由技术。 前端路由 根据地址栏变化不发请求去局部更新不同的页面内容。 前端业务场景切换。 模拟实现原理 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title /head bodydivnav!-- #:在地址栏有两个含义- 锚点链接在页面内部进行导航不会有页面跳转。- hash。在前端路由技术中我们叫它哈希值。它不会有页面跳转地址栏变化的浏览器中后退前进也是可用的http://127.0.0.1:5500/index.html#/add --a href#/主页/aa href#/add添加/a/navdiv idcontent!-- // 模拟不同的地址栏中的hash值显示不同的内容 --/div/divscript// 实现前端路由效果// - 地址栏变化页面内容变化不刷新// 1. 如何监听地址栏中hash值的变化// 答在window上添加hashchange监听// 2. 如何获取当前地址栏中的hash值// 答location.hashwindow.addEventListener(hashchange, onHashChange)// 当页面中的dom加载完成就去执行window.addEventListener(DOMContentLoaded,function() {onHashChange()})function onHashChange (e) {console.log(hash值的变了)console.log(e)// 根据不同的hash值显示不同的内容到content区域switch (location.hash) {case #/: // 主页document.getElementById(content).innerHTML 这里主页的内容break;case #/add: // adddocument.getElementById(content).innerHTML 这里是add的内容break;default:document.getElementById(content).innerHTML 404没有这个页面break;}// if elseif ,elseif ......}/script /body /html技术要点 地址url 中看到 #这个 # 有两种情况一个是我们所谓的锚点比如典型的回到顶部按钮原理、Github 上各个标题之间的跳转等路由里的 # 不叫锚点我们称之为 hash。地址栏中hash的变化是不会发生页面跳转的hashchange 事件用来监听hash值的变化。hash的改变也会记录到浏览历史中通过回退和前进可以切换业务场景 SPA 单页面应用程序简称SPAsingle page application一个系统上的所有功能在一个页面上实现。 (在移动端比较多) SPA是通过前端路由实现业务场景的切换的。 在vue框架中额外引入vue-router插件来配合组件系统就可以轻易地实现。 在单页面应用程序中如何切换页面的业务场景。 http://zhoushugang.gitee.io/hm-toutiao-pc-93/https://music.163.com/ 优点 整体不刷新页面用户体验更好。 缺点 首次加载会比较慢一点。 vue-router-使用步骤 vue-router是vue的一个插件当我们的项目需要前端路由时我们要先把它下载引入到页面中。 下载 https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js 导入插件 # 先下载到本地再引用 script src./vue-router.min.js/script # 直接引用 script srchttps://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js/script初始化vue-router插件 用VueRouter构造器创建路由实例并配置路由规则。 基本格式 const router new VueRouter({routes: [{path:路径1,component:要展示的组件1},{path:路径2,component:要展示的组件2},.....] })示例 vue-router中有一套约定的规则用来确定在哪个url下显示哪个组件。 // 初始化vue-router且使用刚定义的路由规则 const router new VueRouter({// 初始化路由的配置对象// 有以一个配置项 routes 定义路由规则routes:[{path: /, component: {template:div我是主页/div}},{path: /news, component: {template:div新闻-生活早知道/div}},{path: /sport, component: {template:div体育-体育改变人生/div} }] })使用路由实例 在vue构造器中有一项是router它专门用来设置路由对象 new Vue({el: #app,// vue提供了一个配置选项router选项是用来挂载路由实例的// 只有挂载了 router 实例 才可使用路由的功能router:路由对象 })设置路由出口 在vue的模板添加一个router-view组件用它来指定当前路由对应组件渲染的位置。 !-- 渲染路由对应的组件 router-view承载路由对应的组件的-- router-view/router-view测试使用 请直接在地址栏中补充对应的路由地址来查看路由效果。 路由链接导航 通过router-link来进行路由跳转。 !-- 写路由链接 不会使用a标签 使用router-link组件 -- nav!-- 组件默认解析的是a标签 to属性跳转的地址不需要带上# --router-link to/主页/router-linkrouter-link to/news新闻/router-linkrouter-link to/sports运动/router-link /navrouter-link组件会被vue解析成a标签但不能直接通过a标签来跳转。如果当前路由被激活会添加特殊的类名 router-link-exact-active router-link-active动态路由 目标实现新闻详情的功能即不同的新闻使用同一个组件但要传入不同的参数。 概念不同的路由地址指向同一个组件此时需要使用动态路由。 示图 代码 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.router-link-exact-active{color:red;padding:0 5px;}/style /head bodydiv idapph3动态路由/h3router-link to/detail/100编号为100的新闻/router-linkrouter-link to/detail/101编号为101的新闻/router-linkrouter-link to/detail/102编号为102的新闻/router-linkrouter-link to/detail/103编号为103的新闻/router-linkrouter-view/router-view/divscript srchttps://unpkg.com/vue/dist/vue.js/scriptscript srchttps://unpkg.com/vue-router/dist/vue-router.js/scriptscript// 动态路由// -- 同一个组件根据传入参数不同显示不同的内容。// 例如大事件项目前中的新闻详情页。// localhost:3000/index.html#/detail/100 ---- 显示编号为100的新闻// localhost:3000/index.html#/detail/101 ---- 显示编号为101的新闻// 1. 定义路由规则// path:/detail/:形参名// 2. 跳转 to:/detail/实参// 3. 在组件中获取当前的参数值// this.$route.params.形参// - $route 引入了vueRouter插件之后 vue组件内部通过 $route 就可以直接来访问当前的组件对象// - $route这个对象有很多属性params用来保存当前传入动态路由的参数值const myrouter new VueRouter({routes: [// path是hash值component是组件就是显示的内容{path: /,component:{template: div我是主页!!!!!/div}},// /detail/:id 可以匹配类似于 /detail/XXXXX 的路径{path:/detail/:id123,component:{template: divh1新闻详情页-{{$route.params.id123}}/h1button clickh1点击/button/div,methods: {h1 () {console.log( this.$route.params.id123)}}}},{path: *,component:{template: div你要访问的页面不存在404/div}},]})new Vue({el: #app,data:{},methods:{},router: myrouter// 用来设置路由对象 })/script /body /html总结 在路由规则中匹配到不同的地址指向同一个组件代码{path:/detail/:id, component: detail}数据模板 {{$route.params.id}} 组件 this.$route.params.id 页面跳转及传参 从页面pageA跳转到pageB ,并携带参数 跳转有两种方式 通过router-link的to属性跳转通过$router.push()方法来跳转 传参有两种方式: 查询传参 /aricle?id1001路径传参 /article/1001 获取传参数的方式: 根据传参不同获取参数也不同 - 查询传参 this.$route.query.id - 路径传参this.$route.params.id声明式导航 通过router-link组件的属性to来声明它的跳转后的路由地址。 不带参数的跳转 普通字符串不带参数。 router-link to/list/router-link对象普通跳转不带参数 router-link :to{path:/list}/router-link带参数的跳转 普通字符串进行带参数的跳转。 !-- 路径传参 路由规则{path:/article/:id}-- router-link to/article/10001/router-link!-- 查询传参 路由规则{path:/article}-- router-link to/article?id10001/router-link对象路径传参 !--路径传参 路由规则{path:/article/:id,name:article,component:Article}] ---router-link :to{name:article,params:{id: 10001}}/router-link !-- /article/10001 --对象查询传参 !--路径传参 路由规则 {path:/article,component:ArticleItem} -- router-link :to{path:/article,query:{id: 10001}}/router-link !-- /article?id10001 --代码 div idapp!-- 各种router-link写法 --!-- 字符串 --router-link to/list文章列表/router-linkrouter-link to/article/10001文章详情/router-linkrouter-link to/item?id10001文章详情/router-linkhr!-- 对象 --router-link :to{path:/list}文章列表/router-linkrouter-link :to{name:article,params:{id:10001}}文章列表/router-linkrouter-link :to{path:/item,query:{id:10001}}文章列表/router-link!-- 显示路由对应组件容器 --router-view/router-view/divscript src./vue.js/scriptscript src./vue-router.min.js/scriptscript// routes 指定路由规则数组const router new VueRouter({ routes:[{path: /list, component: {template: div列表组件/div}},{path: /article/:id, name: article,component: {template: divarticle文章详情组件 {{$route.params.id}}/div}},{path: /item, component: {template: divitem文章详情组件 {{$route.query.id}}/div}}] })new Vue({el: #app,router})/script总结对象方式的两种传参怎么取值。 :to{name:article,params:{id:10001}} $route.params.id 解析后/article/10001 :to{path:/item,query:{id:10001}} $route.query.id 解析后/item?id10001 编程式导航 通过 js代码调用一个导航函数(this.$router.push)进行跳转。 场景 在界面上有确切的跳转链接使用声明式导航。当你在执行一个js逻辑的时候你想进行跳转此时使用编程式导航。 在做登录的时候登录成功后才应该跳转到首页。 格式 // 字符串 this.$router.push(/home)// 对象 this.$router.push({ path: home })// 命名的路由 // 路径传参 this.$router.push({ name: user, params: { userId: 123 }})// 查询参数变成 /register?planprivate this.$router.push({ path: register, query: { plan: private }})代码 div idapp!-- 声明式导航 --router-link to/login登录页面/router-link!-- 显示路由对应组件容器 --router-view/router-view/divscript src./vue.js/scriptscript src./vue-router.min.js/scriptscriptconst router new VueRouter({ // routes 指定路由规则数组routes:[{path: /login,component: {template: divinput typetext placeholder用户名input typepassword placeholder密码button clicklogin登录/button/div,methods: {login () {// 进行登录// 假设登录成功了// 跳转到首页// 只能通过js的方式进行跳转编程式导航// vue实例提供了一个对象 $router // $router就是路由实例提供一个函数 push可以进行跳转this.$router.push(/home)}}}},{path: /home,component: {template: div首页/div}}] })new Vue({el: #app,router})/script总结 js代码执行的导航跳转就是编程式导航 this.$router.push(/home)to属性解析过执行的跳转依赖的代码其实就是编程式导航代码。router-link的to属性能使用的传参方式在编程式导航中都可以使用。 // 路径传参 this.$router.push({name:article,params:{id:10001}}) // 键值对传参 this.$router.push({path:/item,query:{id:10001}})路由重定向 重定向 当你访问某个地址的时候经过程序的处理用户看不见跳转到了另外一个地址。 前端的路由使用使用重定向功能假设一个业务场景 当你访问页面的时候默认hash地址是 #/ 默认的路由地址 /此时我们项目的首页 /home ,所以当我们访问/重定向到/home才能默认访问首页。 代码 !-- 根容器 --div idapprouter-view/router-view/divscript src./vue.js/scriptscript src./vue-router.min.js/scriptscriptconst router new VueRouter({ // routes 指定路由规则数组routes:[// 匹配 / 路径重定向 到 /home 即可{path: /, redirect: /home},// 首页路由规则{path: /home,component: {template: div首页页面内容/div}}] })new Vue({el: #app,router})/script总结 路由规则对象中 提供了一个选项redirect 配置重定向的地址即可。 路由嵌套 原理router-view中再次包含router-view。 背景一个组件内部包含的业务还是很复杂需要再次进行拆分。 格式 routes:[{path: /sport, component: {template:divrouter-view/router-view/div},children: [path:/xx1,]} ]示例 总结 在已有的路由容器中再实现一套路由再套一个路由容器叫嵌套路由。 代码 !DOCTYPE html html langzhheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestylebody {background-color: #eee;}nav {border:1px solid #ccc;padding:1em;margin:5px;}#app {background-color: #fff;width: 500px;margin: 50px auto;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);padding: 2em;}.box {padding: 1em;border: 1px solid #ccc;margin: 1em;}.router-link-active{}.router-link-exact-active {color:red;}/style /headbodydiv idappnav!-- 通过router-link来跳转页面如果是当前页则会添加 .router-link-exact-active .router-link-active 类 --router-link to/主页/router-linkrouter-link to/news新闻/router-linkrouter-link to/sport体育/router-link/nav!-- 一级路由容器 --router-view/router-view/divscript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/vue-router/3.1.3/vue-router.js/scriptscriptconst sports {template:divh3体育-体育改变人生/h3router-link to/sport主页/router-linkrouter-link to/sport/guonei国内/router-linkrouter-link to/sport/guowai国外/router-linkrouter-view/router-view/div}// 初始化vue-router且使用刚定义的路由规则const router new VueRouter({// 初始化路由的配置对象// 有以一个配置项 routes 定义路由规则routes:[{path: /, component: {template:div我是主页/div}},{path: /news, component: {template:div新闻-生活早知道/div}},{path: /sport, component: sports,children: [ {path: , // 二级路由的默认显示内容component: {template:divh4体育栏目的主页/h4/div}},{path: guonei,component: {template:divh4国内体育新闻/h4/div}},{path: guowai,component: {template:divh4国外体育新闻/h4/div}}]},{path: /detail/:id, component: {template:div我是新闻详情页{{$route.params.id}}/div}}]})new Vue({el: #app,router})/script /body/html总结 嵌套路由除了 router-view 之间需要嵌套路由规则也需要通过children来实现嵌套。 children: [ {path: , // 二级路由的默认显示内容component: {template:divh4体育栏目的主页/h4/div}},{path: guonei,component: {template:divh4国内体育新闻/h4/div}},{path: guowai,component: {template:divh4国外体育新闻/h4/div}}]},{path: /detail/:id, component: {template:div我是新闻详情页{{$route.params.id}}/div}}]}) new Vue({ el: ‘#app’, router }) 总结 嵌套路由除了 router-view 之间需要嵌套路由规则也需要通过children来实现嵌套。