余姚网站推广,宁波网站建设联系荣胜,重庆公司企业网站建设,wordpress图标显示本文主要介绍如何使用路由控制来实现将一个单页面网站扩展成多页面网站#xff0c;包括页面扩展的逻辑#xff0c;vue的官方路由vue-router的基本用法以及扩展用法 文章目录 本系列前文传送门一、场景说明二、基本的页面扩展页面扩展是在扩什么创建新页面的代码#xff0c;… 本文主要介绍如何使用路由控制来实现将一个单页面网站扩展成多页面网站包括页面扩展的逻辑vue的官方路由vue-router的基本用法以及扩展用法 文章目录 本系列前文传送门一、场景说明二、基本的页面扩展页面扩展是在扩什么创建新页面的代码让页面内容变化起来对地址栏的地址格式进行一个优化 三、避免页面频繁重新加载的路由用法router-view/的作用router-link标签router-link标签作用 四、路由用法扩展更多定制化的路由配置场景动态路由实现详情页展示 五、控制路由跳转的API本系列下一篇文章传送门 本系列前文传送门
「Vue网页开发前端开发」01 快速入门快速写一个Vue的HelloWorld项目 一、场景说明
我们在进行网站开发的时候大多数都是需要有多个页面展示不同内容或者提供不同功能。每个页面单独启动一个项目的做法不太现实实际业务中是一个项目中一个页面对应项目代码中一个代码文件然后通过浏览器地址的不同后缀比如/home, /about, /prodcut, /center等等来对应到不同的代码文件进而在浏览器上展示不同的内容和提供不同的功能。
二、基本的页面扩展
页面扩展是在扩什么
在前文介绍如何快速开始一个项目时我们已经探索到了页面渲染的逻辑即
浏览器根据地址栏输入的地址会得到一个path我们在代码里指明某个path对应某个component我们在component编写我们要展示的内容和功能
就完成了从代码到浏览器内容的关联和渲染展示。
当我们要跳转到一个新的页面的时候一般地址栏的地址会跟随着变化会有一个新的地址即会有一个新的path。 所以当我们要增加一个新的页面的时候其实就是新增一个从代码到浏览器地址的关联关系。即在src/router/index.js中 将
import Vue from vue
import Router from vue-router
import HelloWorld from /components/HelloWorldVue.use(Router)export default new Router({routes: [{path: /,name: HelloWorld,component: HelloWorld}]
})
改成
import Vue from vue
import Router from vue-router
import HelloWorld from /components/HelloWorldVue.use(Router)export default new Router({routes: [{path: /,name: HelloWorld,component: HelloWorld},{path: /about,name: About,component: HelloWorld }]
})这里我们在routes的值中增加了一个元素即增加了一个从浏览器地址后缀/about关联到代码HelloWorld的关联关系只不过我们这里关联的代码没有额外写而是直接再次用了HelloWorld页面的代码。
现在我们的项目就有两个页面了可以分别通过浏览器地址栏输入http://localhost:8080/#/和http://localhost:8080/#/about来访问两个页面。
由于我们使用了同样的代码来展示两个页面所以看到的页面内容其实是一样的。打个比方说如果我们的项目现在是一本两页的书那么这两页的内容是一样的。
可以确定的是我们现在确实是两个页面而不是一个页面。如果需要验证这一点可以把我们刚才的代码改动先注释掉或者删掉然后直接访问http://localhost:8080/#/about可以看到页面的内容其实跟HelloWorld页面内容不一样而是下面的仅有一个logo图片的页面
创建新页面的代码让页面内容变化起来
现在我们需要编写一个新的代码来对应路径/about使得浏览器展示我们想展示的内容。因为我们的代码是由框架生成的标准化代码所以这件事变得很简单我们可以这样操作
直接复制一份HelloWorld.vue代码副本然后将副本命名为About.vue在src/router/index.js中导入About再将路径/about对应的代码从HelloWorld改成About
这样我们就完成了两个路径对应两个页面两个页面用的是不同代码。然后我们修改About.vue里面的内容让我们可以直观地从浏览器展示的内容观察到这一点。 进入App.vue然后修改底下msg变量的值 将
export default {name: HelloWorld,data () {return {msg: Hello Vue World!}}
}改成
export default {name: HelloWorld,data () {return {msg: About Vue World!}}
}保存后重新打开浏览器可以看到我们/about对应的页面内容已经发生变化
至此我们就完成了网站页面从单页面网站升级成多页面网站的过程~ (●ˇ∀ˇ●)
对地址栏的地址格式进行一个优化
我们可以看到我们的两个页面的地址栏输入是http://localhost:8080/#/和http://localhost:8080/#/about所以我们目前的地址栏格式是http://localhost:8080/#/XXXXX。
这种格式其实我们在日常浏览其他网站的时候并不常见更常见的格式是http://localhost:8080/about也就是我们可以优化一下地址格式尝试将#/从地址中移除。
要实现这一点我们只需要在src/router/index.js中在创建router实例的时候指定一个mode参数如下
export default new Router({mode: history,routes: [{path: /,name: HelloWorld,component: HelloWorld},{path: /about,name: About,component: About}]
})重新打开浏览器就可以看到地址格式已经是我们希望的样子了
三、避免页面频繁重新加载的路由用法
到这里我们可以做一个回顾我们在给一个网站安装路由器的时候都做了哪些事情
首先我们使用了vue的官方路由包vue-router这个包在一开始初始化项目时通过命令行提示选择了Yes完成了安装。如果不是这样则需要通过npm install vue-router进行安装。然后我们出于文件结构清晰的考虑会有一个router文件夹文件夹下是router的入口index.js框架初始化时已经自动生成。router/index.js中生成了路由器Router实例其中指定了浏览器地址(path)到代码(component)的关联关系由此完成了引导浏览器根据地址栏输入的地址将项目中对应的代码渲染到浏览器中进行展示的工作。然后我们去扩展地址(path)跟代码(component)的关联关系来增加网站能够展示的页面数量。
至此我们接触了vue路由相关的概念
官方路由包vue-router路由文件入口src/router/index.js生成的路由器实例Router()在项目应用中导入路由src/main.js[line:10] new Vue(el, router, components, template)在页面中使用路由src/App.vue[line:4] router-view/
router-view/的作用
router-view就是在页面渲染的时候通过地址栏的path在我们指定的路径 - 代码的关联关系中找到需要渲染的代码然后将代码的内容替换到router-view的位置上。通过这一点我们可以进一步理解我们目前看到的页面内容
我们在HelloWorld中定义了一些文本和一些超链接所以渲染时router-view会替换成这些文本和超链接于是我们便看到浏览器中的内容。 当我们输入一个在路径 - 代码关联关系中没有指定的路径比如/nothing我们会看到文本和链接都不见了取而代之的是一片空白就可以理解成router-view没有找到要替换的代码就是空于是router-view的位置就是一片空白。 在/nothing页面中虽然文本和超链接不见了但是logo图片还在我们去看这个logo图片代码的位置就可以知道这是因为logo图片代码是在router-view上方单独的代码而不是它去替换的内容所以每个页面都能看到logo图片。
router-link标签
除了router-view标签之外如果去看官网文档或者其他资料一般会提到另一个标签叫做router-link。
router-link其实就是替代原生的HTML超链接标签a存在的写法如下
router-link to/Go to Home/router-link
router-link to/aboutGo to About/router-linkrouter-link标签作用
router-link text router-link/当然不只是给a text /a的另一种写法必然是还有其他好处才会出现。
所以它的好处就是能够使得vue-router可以在不重新加载页面的情况下更改 URL处理 URL 的生成以及编码。减少页面的重新加载就可以提高网站的性能和用户在浏览和跳转过程中的体验这才是我们去用router-link代替a所希望得到的。
四、路由用法扩展更多定制化的路由配置场景
动态路由实现详情页展示
我们在实际开发过程中一个页面展示的内容布局是不变的只是页面的数据不同而已比如
博客网站的博文详情页电商网站的商品详情页视频网站的视频播放页…
关于详情页这种只是数据变化的页面我们的实现方法一般是拿到数据之后将数据展示到对应的位置上。至于数据可以是在页面跳转前将数据传入常见于我们说的MVC架构中也可以是从网页请求中获取对应的数据参数然后进行数据请求得到数据常见于前后端分离的架构。
如果我们是从网页请求中获取的数据参数则我们可以常见到如下两种请求方式
参数作为url请求传入http://localhost:8080/user?user_id1restful的方式作为路由的一部分由路由逻辑按照指定模式去匹配获取http://localhost:8080/user/1
如果要实现http://localhost:8080/user/1这种方式我们可以可以使用vue-router的动态路由参数将router的配置修改如下
export default new Router({mode: history,routes: [{// 动态字段以冒号开始path: /user/:id,name: UserDetail,component: UserDetail}
})除此之外还有一些其他的常见用法 不同路径指向相同页面 比如/和/home甚至/index都指向HomePage{ path: /, component: Homepage, alias: /home }{ path: /, component: Homepage, alias: [/home, /index] } 嵌套路由 只替换某些部分的内容公共内容不变减少重复代码/user/:id/profile显示用户个人信息/user/:id/posts 显示用户发布的文章
routes: [{path: /user/:id,component: User,children: [{// 当 /user/:id/profile 匹配成功// UserProfile 将被渲染到 User 的 router-view 内部path: /profile,component: UserProfile},{// 当 /user/:id/posts 匹配成功// UserPosts 将被渲染到 User 的 router-view 内部path: /posts,component: UserPosts},],},
]懒加载 只有当路由被访问的时候才加载对应组件防止页面加载过慢以及构建应用时打包的js包过大不是懒加载的写法import HelloWorld from /components/HelloWorld懒加载写法一const HelloWorld import(/components/HelloWorld)懒加载写法二异步{ path: /, name: HelloWorld, component: resolve require([/components/HelloWorld], resolve) }
五、控制路由跳转的API
我们也可以通过在组件中调用Router API来实现路由的跳转、回退等功能。 跳转到其他页面 API写法this.$router.push(/about)等价于router-link形式router-link :to/about跳转到About/router-link等价URL: /about 带参数跳转 this.$router.push({ path: /search, query: { keyword: vue } })等价URL/search?keywordvue 获取参数this.$route.query.keyword // 得到值vue 带锚点hash(#)跳转 router.push({ path: /about, hash: #team })等价URL/about#team 使用params跳转 可以让参数不显示在URL上防止一些信息泄露this.$router.push({ name: user, params: { username: aki } }) 获取paramsthis.$router.params.username // 得到值: aki 返回上一页this.$router.go(-1) 后退两页this.$router.go(-2)
掌握了以上内容基本就可以解决实际业务开发中的大部分场景第四部分的API不需要记忆只需要记住可以通过编写代码逻辑的形式来控制路由即可。
快去试试搭建自己的多页面网站吧~ 本系列下一篇文章传送门
「CSS前端开发页面布局」03 开发网站所需要知道的CSS如何实现你想要的页面布局 写文不易如果对你有帮助的话来一波点赞、收藏、关注吧~
