1、Vue路由，路由的基本概念与原理。
答：1）、路由是一个比较广义和抽象的概念，路由的本质就是对应关系。
2）、在开发中，路由分为，后端路由和前端路由。
3）、后端路由，根据不同的用户URL请求，返回不同的内容。后端路由的本质就是URL请求地址与服务器资源之间的对应关系。后端路由根据不同的URL地址分发不同的资源。
4）、前端路由，根据不同的用户事件，显示不同的页面内容。本质就是用户事件与事件处理函数之间的对应关系。前端路由负责事件监听，触发事件后，通过事件函数渲染不同内容。
2、SPA(Single Page Application)。
答：1）、后端路由的渲染，就叫做后端渲染（存在性能问题）。
2）、Ajax前端渲染，前端渲染提供性能，但是不支持浏览器的前进后退操作。
3）、SPA(Single Page Application)单页面应用程序，整个网站只有一个界面，内容的变化通过Ajax局部更新实现，同时支持浏览器地址栏的前进和后退操作。
4）、SPA实现原理之一就是基于URL地址的hash，hash的变化会导致浏览器记录访问历史的变化，但是hash的变化不会触发新的URL请求。
5）、在实现SPA过程中，最核心的技术点就是前端路由。
3、路由的基本概念与原理，实现简易前端路由。
答：1）、基于URL中的hash实现，点击菜单的时候改变url的hash，根据hash的变化控制组件的切换。
2）、window.onhashchange，监听window的onhashchange事件，根据获取到的最新的hash值，切换要显示的组件的名称，通过location.hash获取到最新的hash值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <!-- 被Vue实例控制的div区域 --> 9 <div id="app"> 10 <div v-text="name"></div> 11 <!-- 切换组件的超链接 --> 12 <a href="#/zhuye">主页</a> 13 <a href="#/keji">科技</a> 14 <a href="#/caijing">财经</a> 15 <a href="#/yule">娱乐</a> 16 17 <!-- 根据:is属性指定的组件名称,把对应的组件渲染到component标签所在的位置 --> 18 <!-- 可以把component标签当作是组件的占位符 --> 19 <component :is="comName"></component> 20 </div> 21 22 <script type="text/javascript" src="js/vue.js"></script> 23 <script type="text/javascript"> 24 /* 创建需要被切换的四个组件 */ 25 var zhuye = { 26 template: '<h1>主页信息</h1>', 27 }; 28 var keji = { 29 template: '<h1>科技信息</h1>', 30 }; 31 var caijing = { 32 template: '<h1>财经信息</h1>', 33 }; 34 var yule = { 35 template: '<h1>娱乐信息</h1>', 36 }; 37 38 39 /* 创建Vue的实例对象 */ 40 var vm = new Vue({ 41 el: '#app', 42 data: { 43 name: 'hello world!!!', 44 comName: 'zhuye', 45 }, 46 components: { 47 zhuye, 48 keji, 49 caijing, 50 yule, 51 }, 52 }); 53 54 // window.onhashchange，监听window的onhashchange事件，根据获取到的最新的hash值，切换要显示的组件的名称。 55 window.onhashchange = function() { 56 // 通过location.hash获取到最新的hash值. 57 console.log(location.hash, location.hash.slice(1)); 58 switch (location.hash.slice(1)) { 59 case '/zhuye': 60 vm.comName = 'zhuye'; 61 break; 62 case '/keji': 63 vm.comName = 'keji'; 64 break; 65 case '/caijing': 66 vm.comName = 'caijing'; 67 break; 68 case '/yule': 69 vm.comName = 'yule'; 70 break; 71 } 72 } 73 </script> 74 </body> 75 </html>
效果，如下所示：
4、Vue Router路由管理器（官网https://router.vuejs.org/zh/），Vue Router是Vue.js官方的路由管理器。
答：1）、Vue Router路由管理器是和Vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发。Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
2）、包含的功能有：
a、嵌套的路由/视图表
b、模块化的、基于组件的路由配置
c、路由参数、查询、通配符
d、基于 Vue.js 过渡系统的视图过渡效果
e、细粒度的导航控制
f、带有自动激活的 CSS class 的链接
g、HTML5 历史模式或 hash 模式，在 IE9 中自动降级
h、自定义的滚动条行为
5、Vue Router路由管理器的基本使用。
答：1）、引入相关的库文件。
2）、添加路由链接。
3）、添加路由填充位。
4）、定义路由组件。
5）、配置路由规则并创建路由实例。
6）、把路由挂载到Vue跟实例中。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 7 <!-- 第一步,导入vue文件,为全局window对象挂载vue构造函数 --> 8 <script src="https://unpkg.com/vue/dist/vue.js"></script> 9 <!-- 导入vue-router文件,为全局window对象挂载vueRouter构造函数 --> 10 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 11 </head> 12 <body> 13 <div id="app"> 14 <!-- 第二步,添加路由链接。 --> 15 <!-- router-link是Vue中提供的标签,默认会被渲染为a标签, to属性默认会被渲染为href属性,to属性的值默认会被渲染为#开头的hash地址 --> 16 <router-link to="/user">User</router-link> 17 <router-link to="/register">Register</router-link> 18 19 <!-- 第三步,添加路由填充为 --> 20 <!-- 路由填充为也叫做路由占位符,将来通过路由规则匹配到的组件,将会被渲染到router-view所在的位置 --> 21 <router-view></router-view> 22 </div> 23 24 <script type="text/javascript"> 25 /* 第四步,定义路由组件 */ 26 var User = { 27 template: '<h1>User</h1>', 28 }; 29 var Register = { 30 template: '<h1>Register</h1>', 31 }; 32 33 /* 第五步,配置路由规则并创建路由实例。 */ 34 // 创建路由实例对象 35 var router = new VueRouter({ 36 // routes是路由规则数组 37 routes: [ 38 // 每个路由规则都是一个配置对象,其中至少包含path和component两个属性 39 // path表示当前路由规则匹配的hash地址 40 // component表示当前路由规则对应要展示的组件 41 { 42 path: '/user', 43 component: User, // 组件名称,不是字符串 44 }, 45 { 46 path: '/register', 47 component: Register, // 组件名称,不是字符串 48 } 49 ] 50 }); 51 52 // 创建vm实例对象 53 var vm = new Vue({ 54 // 指定控制的区域 55 el: '#app', 56 data: { 57 58 }, 59 // 第六步,把路由挂载到Vue根实例中 60 // 为了能够让路由规则生效,必须把路由对象挂载到Vue实例对象上 61 router: router, // 挂载实例对象,es6中,如果属性名称和值一样可以直接写成一个属性名称即可. 62 }); 63 </script> 64 </body> 65 </html>
实现效果如下所示：
6、Vue Router路由管理器，路由重定向。
答：1）、路由重定向指的是，用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面。
2）、通过路由规则的redirect属性，指定一个新的路由地址，可以很方便的设置路由的重定向。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 7 <!-- 第一步,导入vue文件,为全局window对象挂载vue构造函数 --> 8 <script src="https://unpkg.com/vue/dist/vue.js"></script> 9 <!-- 导入vue-router文件,为全局window对象挂载vueRouter构造函数 --> 10 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 11 </head> 12 <body> 13 <div id="app"> 14 <!-- 第二步,添加路由链接。 --> 15 <!-- router-link是Vue中提供的标签,默认会被渲染为a标签, to属性默认会被渲染为href属性,to属性的值默认会被渲染为#开头的hash地址 --> 16 <router-link to="/user">User</router-link> 17 <router-link to="/register">Register</router-link> 18 19 <!-- 第三步,添加路由填充为 --> 20 <!-- 路由填充为也叫做路由占位符,将来通过路由规则匹配到的组件,将会被渲染到router-view所在的位置 --> 21 <router-view></router-view> 22
最低0.47元/天 解锁文章
616
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
