7-1 7.1vue-router的基本使用ppt课件 Vue.js基础与应用开发实战（微课版）.pptx

7-1 7.1 vue-router的基本使用教学课件 Vue.js基础与应用开发实战（微课版）7.1 vue-router的基本使用vue-router可以实现当用户单击页面的A按钮时，页面显示对应的A内容；单击B按钮时，页面显示对应的B内容。也就是用户单击的按钮和页面显示的内容，两者是映射的关系。7.1.1 安装vue-router在使用vue-router之前，首先需要安装该插件，命令如下所示。npm install vue-router如果在一个模块化工程中使用vue-router，必须要通过Vue.use()明确地安装路由功能，代码如下所示。import Vue from vueimport VueRouter from vue-routerVue.use(VueRouter)如果使用全局的script标签，则无须如此。7.1.2 使用vue-router使用Vue.js+vue-router创建单页应用非常方便，使用Vue.js可以通过组合组件来组成应用程序，把vue-router添加进来，将组件（components）映射到路由（routes），然后告诉vue-router在哪里渲染它们。【实例7-1】使用vue-router实现单击超链接显示对应的页面内容【操作要求】使用vue-router实现当单击页面的【登录】超链接时，页面显示对应的内容“打开登录页面”；单击【注册】超链接时，页面显示对应的内容“打开注册页面”。【实现过程】创建网页0701.html，在该文件中编写以下代码实现要求的功能。（1）引入库（2）使用router-link组件实现导航 !-默认会被渲染成一个标签-登录 注册（3）添加路由出口（4）如果使用模块化机制编程，需要先导入Vue和VueRouter这 里 不 需 要 导 入 Vue和 VueRouter和 使 用Vue.use(VueRouter)，所以以下3行代码需添加了注释符号。/import Vue from vue/import VueRouter from vue-router/Vue.use(VueRouter)（5）定义路由组件 const Login=template:打开登录页面 const Register=template:打开注册页面（6）定义路由/每个路由应该映射一个组件const routes=path:/login,component:Login,path:/register,component:Register （7）创建router实例创建router实例，然后传入routes配置，当然还可以传入别的配置参数const router=new VueRouter(routes /（缩写形式）相当于 routes:routes )（8）创建和挂载根实例/要通过 router 配置参数注入路由，从而让整个应用都有路由功能。const vm=new Vue(el:#app,router )打开该网页时，HTML将被渲染为：登录 注册 浏览网页0701.html时，单击【注册】按钮显示对应内容“打开注册页面”，如图7-1所示。图图7-1 浏览网页浏览网页0701.html时单击【注册】按钮显示对应内容时单击【注册】按钮显示对应内容“打开注册页面打开注册页面”同样，单击【登录】按钮显示对应内容“打开登录页面”。实现了要求的功能。7.1.3 vue-router的路由模式Vue实现单页面前端路由时，提供了两种模式，分别是hash模式和history模式。1hash模式vue-router默认为hash模式，使用URL的hash来模拟一个完整的URL，当URL改变时，页面不会重新加载，例如：http:/localhost:8080/#/login。#就是hash符号，中文名为哈希符或者锚点，在hash符号后的值称为hash值。2history模式Hash模式的URL中会自带#符号，影响URL的美观，而路由的history模式不会出现#符号，这种模式充分利用history.pushState()来完成URL的跳转，并且无须重新加载页面。使用history模式时，需要在路由规则配置中增加mode:history，示例代码如下所示。const router=new VueRouter(mode:history,routes:)2history模式当使用history模式时，完整URL的示例如下：http:/localhost:8080/login如果要使用history模式，则需要进行服务器配置，如果服务器没有正确配置，浏览器访问页面可能会返回404错误页面。所以，要在服务端增加一个覆盖所有情况的候选资源：如果URL匹配不到任何静态资源，则应该返回同一个index.html页面，这个页面就是app依赖的页面。这么做以后，服务器就不再返回404错误页面，因为对于所有路径都会返回index.html页面。为了避免这种情况，应该在Vue应用里面覆盖所有的路由情况，然后再给出一个404错误页面。例如：const router=new VueRouter(mode:history,routes:path:*,component:NotFoundComponent )快乐学习！高效学习！快乐学习！高效学习！祝学习进步！祝学习进步！