Vue前端路由
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 </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 /* 其中,path表示需要被重定向的原地址,redirect表示将要被重定向到的新地址 */ 50 { 51 path: '/', 52 redirect: '/user' 53 } 54 ] 55 }); 56 57 // 创建vm实例对象 58 var vm = new Vue({ 59 // 指定控制的区域 60 el: '#app', 61 data: { 62 63 }, 64 // 第六步,把路由挂载到Vue根实例中 65 // 为了能够让路由规则生效,必须把路由对象挂载到Vue实例对象上 66 router: router, // 挂载实例对象,es6中,如果属性名称和值一样可以直接写成一个属性名称即可. 67 }); 68 </script> 69 </body> 70 </html>
7、Vue Router路由管理器，Vue Router嵌套路由的案例。
答：1）、首先创建父路由组件模板，父级路由链接、父组件路由填充位。
2）、然后创建子集路由模板，子级路由链接，子级路由填充位。
3）、然后配置嵌套路由配置，父级路由通过children属性配置子级路由。
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: ` 31 <div> 32 <h1>Register</h1> 33 <hr/> 34 <router-link to="/register/tab1">Tab1</router-link> 35 <router-link to="/register/tab2">Tab2</router-link> 36 37 <router-view></router-view> 38 </div> 39 `, 40 //子级路由填充位置<router-view></router-view> 41 }; 42 43 var Tab1 = { 44 template: '<h1>Tab1</h1>', 45 }; 46 var Tab2 = { 47 template: '<h1>Tab2</h1>', 48 }; 49 50 /* 第五步,配置路由规则并创建路由实例。 */ 51 // 创建路由实例对象 52 var router = new VueRouter({ 53 // routes是路由规则数组 54 routes: [ 55 // 每个路由规则都是一个配置对象,其中至少包含path和component两个属性 56 // path表示当前路由规则匹配的hash地址 57 // component表示当前路由规则对应要展示的组件 58 { 59 path: '/user', 60 component: User, // 组件名称,不是字符串 61 }, 62 { 63 path: '/register', 64 component: Register, // 组件名称,不是字符串 65 // 通过children属性,为/register添加子路由规则 66 children: [{ 67 path: '/register/tab1', 68 component: Tab1 69 }, 70 { 71 path: '/register/tab2', 72 component: Tab2 73 }, 74 ] 75 }, 76 /* 其中,path表示需要被重定向的原地址,redirect表示将要被重定向到的新地址 */ 77 { 78 path: '/', 79 redirect: '/user' 80 } 81 ] 82 }); 83 84 // 创建vm实例对象 85 var vm = new Vue({ 86 // 指定控制的区域 87 el: '#app', 88 data: { 89 90 }, 91 // 第六步,把路由挂载到Vue根实例中 92 // 为了能够让路由规则生效,必须把路由对象挂载到Vue实例对象上 93 router: router, // 挂载实例对象,es6中,如果属性名称和值一样可以直接写成一个属性名称即可. 94 }); 95 </script> 96 </body> 97 </html>
8、Vue Router路由管理器，Vue Router动态路由匹配。
答：1）、动态路由匹配，指的是如果某些路由规则一部分是完全一样的，只有另外一部分是动态变化的，这些动态变化的部分形成路由参数，这些路由参数就叫做动态路由匹配。
2）、动态路径参数，以冒号开头，冒号后面的名字就是匹配的名称，通过动态路由参数的模式进行路由匹配。路由组件中通过$route.params获取路由参数。
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/1">User1</router-link> 17 <router-link to="/user/2">User2</router-link> 18 <router-link to="/user/3">User3</router-link> 19 <router-link to="/user/4">User4</router-link> 20 21 <router-link to="/register">Register</router-link> 22 23 <!-- 第三步,添加路由填充为 --> 24 <!-- 路由填充为也叫做路由占位符,将来通过路由规则匹配到的组件,将会被渲染到router-view所在的位置 --> 25 <router-view></router-view> 26 </div> 27 28 <script type="text/javascript"> 29 /* 第四步,定义路由组件 */ 30 var User = { 31 template: '<h1>User组件,用户id为: {{$route.params.id}}</h1>', 32 }; 33 var Register = { 34 template: ` 35 <div> 36 <h1>Register</h1> 37 <hr/> 38 <router-link to="/register/tab1">Tab1</router-link> 39 <router-link to="/register/tab2">Tab2</router-link> 40 41 <router-view></router-view> 42 </div> 43 `, 44 //子级路由填充位置<router-view></router-view> 45 }; 46 47 var Tab1 = { 48 template: '<h1>Tab1</h1>', 49 }; 50 var Tab2 = { 51 template: '<h1>Tab2</h1>', 52 }; 53 54 /* 第五步,配置路由规则并创建路由实例。 */ 55 // 创建路由实例对象 56 var router = new VueRouter({ 57 // routes是路由规则数组 58 routes: [ 59 // 每个路由规则都是一个配置对象,其中至少包含path和component两个属性 60 // path表示当前路由规则匹配的hash地址 61 // component表示当前路由规则对应要展示的组件 62 { 63 path: '/user/:id', // 动态路由匹配 64 component: User, // 组件名称,不是字符串 65 }, 66 { 67 path: '/register', 68 component: Register, // 组件名称,不是字符串 69 // 通过children属性,为/register添加子路由规则 70 children: [{ 71 path: '/register/tab1', 72 component: Tab1 73 }, 74 { 75 path: '/register/tab2', 76 component: Tab2 77 }, 78 ] 79 }, 80 /* 其中,path表示需要被重定向的原地址,redirect表示将要被重定向到的新地址 */ 81 { 82 path: '/', 83 redirect: '/user' 84 } 85 ] 86 }); 87 88 // 创建vm实例对象 89 var vm = new Vue({ 90 // 指定控制的区域 91 el: '#app', 92 data: { 93 94 }, 95 // 第六步,把路由挂载到Vue根实例中 96 // 为了能够让路由规则生效,必须把路由对象挂载到Vue实例对象上 97 router: router, // 挂载实例对象,es6中,如果属性名称和值一样可以直接写成一个属性名称即可. 98 }); 99 </script> 100 </body> 101 </html>
9、Vue Router路由管理器，路由组件传递参数。
答：1）、$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦。
2）、props的值为布尔类型。如果props被设置为true。route.params将会被设置为组件属性。
3）、使用props接收路由参数，直接使用参数名称来使用路由参数。
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/1">User1</router-link> 17 <router-link to="/user/2">User2</router-link> 18 <router-link to="/user/3">User3</router-link> 19 <router-link to="/user/4">User4</router-link> 20 21 <router-link to="/register">Register</router-link> 22 23 <!-- 第三步,添加路由填充为 --> 24 <!-- 路由填充为也叫做路由占位符,将来通过路由规则匹配到的组件,将会被渲染到router-view所在的位置 --> 25 <router-view></router-view> 26 </div> 27 28 <script type="text/javascript"> 29 /* 第四步,定义路由组件 */ 30 var User = { 31 props: ['id'], //使用props接收路由参数 32 template: '<h1>User组件,用户id为: {{id}}</h1>', // 使用路由参数. 33 }; 34 var Register = { 35 template: ` 36 <div> 37 <h1>Register</h1> 38 <hr/> 39 <router-link to="/register/tab1">Tab1</router-link> 40 <router-link to="/register/tab2">Tab2</router-link> 41 42 <router-view></router-view> 43 </div> 44 `, 45 //子级路由填充位置<router-view></router-view> 46 }; 47 48 var Tab1 = { 49 template: '<h1>Tab1</h1>', 50 }; 51 var Tab2 = { 52 template: '<h1>Tab2</h1>', 53 }; 54 55 /* 第五步,配置路由规则并创建路由实例。 */ 56 // 创建路由实例对象 57 var router = new VueRouter({ 58 // routes是路由规则数组 59 routes: [ 60 // 每个路由规则都是一个配置对象,其中至少包含path和component两个属性 61 // path表示当前路由规则匹配的hash地址 62 // component表示当前路由规则对应要展示的组件 63 { 64 path: '/user/:id', // 动态路由匹配 65 component: User, // 组件名称,不是字符串 66 /* 如果props被设置为true。route.params将会被设置为组件属性。 */ 67 props: true, 68 }, 69 { 70 path: '/register', 71 component: Register, // 组件名称,不是字符串 72 // 通过children属性,为/register添加子路由规则 73 children: [{ 74 path: '/register/tab1', 75 component: Tab1 76 }, 77 { 78 path: '/register/tab2', 79 component: Tab2 80 }, 81 ] 82 }, 83 /* 其中,path表示需要被重定向的原地址,redirect表示将要被重定向到的新地址 */ 84 { 85 path: '/', 86 redirect: '/user' 87 } 88 ] 89 }); 90 91 // 创建vm实例对象 92 var vm = new Vue({ 93 // 指定控制的区域 94 el: '#app', 95 data: { 96 97 }, 98 // 第六步,把路由挂载到Vue根实例中 99 // 为了能够让路由规则生效,必须把路由对象挂载到Vue实例对象上 100 router: router, // 挂载实例对象,es6中,如果属性名称和值一样可以直接写成一个属性名称即可. 101 }); 102 </script> 103 </body> 104 </html>
4）、如果props是一个对象，它会被按原样设置为组件属性，对象中有什么数据，组件中就可以接收到什么数据。
5）、props的值为函数类型，如果props是一个函数，则这个函数接收route对象为子级的形参。
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/1">User1</router-link> 17 <router-link to="/user/2">User2</router-link> 18 <router-link to="/user/3">User3</router-link> 19 <router-link to="/user/4">User4</router-link> 20 21 <router-link to="/register">Register</router-link> 22 23 <!-- 第三步,添加路由填充为 --> 24 <!-- 路由填充为也叫做路由占位符,将来通过路由规则匹配到的组件,将会被渲染到router-view所在的位置 --> 25 <router-view></router-view> 26 </div> 27 28 <script type="text/javascript"> 29 /* 第四步,定义路由组件 */ 30 var User = { 31 props: ['id', 'uname', 'age'], //使用props接收路由参数 32 template: '<h1>User组件,用户为: {{id}} {{uname}} {{age}}</h1>', // 使用路由参数. 33 }; 34 var Register = { 35 template: ` 36 <div> 37 <h1>Register</h1> 38 <hr/> 39 <router-link to="/register/tab1">Tab1</router-link> 40 <router-link to="/register/tab2">Tab2</router-link> 41 42 <router-view></router-view> 43 </div> 44 `, 45 //子级路由填充位置<router-view></router-view> 46 }; 47 48 var Tab1 = { 49 template: '<h1>Tab1</h1>', 50 }; 51 var Tab2 = { 52 template: '<h1>Tab2</h1>', 53 }; 54 55 /* 第五步,配置路由规则并创建路由实例。 */ 56 // 创建路由实例对象 57 var router = new VueRouter({ 58 // routes是路由规则数组 59 routes: [ 60 // 每个路由规则都是一个配置对象,其中至少包含path和component两个属性 61 // path表示当前路由规则匹配的hash地址 62 // component表示当前路由规则对应要展示的组件 63 { 64 path: '/user/:id', // 动态路由匹配 65 component: User, // 组件名称,不是字符串 66 /* 如果props是一个对象，它会被按原样设置为组件属性。 */ 67 /* props: { 68 uname: '张飒飒', 69 age: 12 70 }, */ 71 72 /* 如果props是一个函数， 则这个函数接收route对象为子级的形参 */ 73 /* route对象就是路由中的动态参数对象,路径中有几个参数项,route里面就有几个参数值. */ 74 props: route => ({ // 返回一个props对象 75 uname: '张飒飒', 76 age: 20, 77 id: route.params.id, 78 }) 79 }, 80 { 81 path: '/register', 82 component: Register, // 组件名称,不是字符串 83 // 通过children属性,为/register添加子路由规则 84 children: [{ 85 path: '/register/tab1', 86 component: Tab1 87 }, 88 { 89 path: '/register/tab2', 90 component: Tab2 91 }, 92 ] 93 }, 94 /* 其中,path表示需要被重定向的原地址,redirect表示将要被重定向到的新地址 */ 95 { 96 path: '/', 97 redirect: '/user' 98 } 99 ] 100 }); 101 102 // 创建vm实例对象 103 var vm = new Vue({ 104 // 指定控制的区域 105 el: '#app', 106 data: { 107 108 }, 109 // 第六步,把路由挂载到Vue根实例中 110 // 为了能够让路由规则生效,必须把路由对象挂载到Vue实例对象上 111 router: router, // 挂载实例对象,es6中,如果属性名称和值一样可以直接写成一个属性名称即可. 112 }); 113 </script> 114 </body> 115 </html>
10、Vue Router路由管理器，Vue Router命名路由。
答：1）、为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为命名路由。
2）、通过命名路由可以实现页面的跳转。可以用在编程式导航。
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/1">User1</router-link> 17 <router-link to="/user/2">User2</router-link> 18 <!-- 要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象： --> 19 <router-link :to="{name:'user',params:{id:123456}}">User3</router-link> 20 <router-link to="/user/4">User4</router-link> 21 22 <router-link to="/register">Register</router-link> 23 24 <!-- 第三步,添加路由填充为 --> 25 <!-- 路由填充为也叫做路由占位符,将来通过路由规则匹配到的组件,将会被渲染到router-view所在的位置 --> 26 <router-view></router-view> 27 </div> 28 29 <script type="text/javascript"> 30 /* 第四步,定义路由组件 */ 31 var User = { 32 props: ['id', 'uname', 'age'], //使用props接收路由参数 33 template: '<h1>User组件,用户为: {{id}} {{uname}} {{age}}</h1>', // 使用路由参数. 34 }; 35 var Register = { 36 template: ` 37 <div> 38 <h1>Register</h1> 39 <hr/> 40 <router-link to="/register/tab1">Tab1</router-link> 41 <router-link to="/register/tab2">Tab2</router-link> 42 43 <router-view></router-view> 44 </div> 45 `, 46 //子级路由填充位置<router-view></router-view> 47 }; 48 49 var Tab1 = { 50 template: '<h1>Tab1</h1>', 51 }; 52 var Tab2 = { 53 template: '<h1>Tab2</h1>', 54 }; 55 56 /* 第五步,配置路由规则并创建路由实例。 */ 57 // 创建路由实例对象 58 var router = new VueRouter({ 59 // routes是路由规则数组 60 routes: [ 61 // 每个路由规则都是一个配置对象,其中至少包含path和component两个属性 62 // path表示当前路由规则匹配的hash地址 63 // component表示当前路由规则对应要展示的组件 64 { 65 path: '/user/:id', // 动态路由匹配 66 component: User, // 组件名称,不是字符串 67 /* 如果props是一个对象，它会被按原样设置为组件属性。 */ 68 /* props: { 69 uname: '张飒飒', 70 age: 12 71 }, */ 72 73 /* 如果props是一个函数， 则这个函数接收route对象为子级的形参 */ 74 /* route对象就是路由中的动态参数对象,路径中有几个参数项,route里面就有几个参数值. */ 75 props: route => ({ // 返回一个props对象 76 uname: '张飒飒', 77 age: 20, 78 id: route.params.id, 79 }), 80 /* 命名路由 */ 81 name: 'user', // 通过路由的name属性可以实现导航和跳转功能 82 }, 83 { 84 path: '/register', 85 component: Register, // 组件名称,不是字符串 86 // 通过children属性,为/register添加子路由规则 87 children: [{ 88 path: '/register/tab1', 89 component: Tab1 90 }, 91 { 92 path: '/register/tab2', 93 component: Tab2 94 }, 95 ] 96 }, 97 /* 其中,path表示需要被重定向的原地址,redirect表示将要被重定向到的新地址 */ 98 { 99 path: '/', 100 redirect: '/user' 101 } 102 ] 103 }); 104 105 // 创建vm实例对象 106 var vm = new Vue({ 107 // 指定控制的区域 108 el: '#app', 109 data: { 110 111 }, 112 // 第六步,把路由挂载到Vue根实例中 113 // 为了能够让路由规则生效,必须把路由对象挂载到Vue实例对象上 114 router: router, // 挂载实例对象,es6中,如果属性名称和值一样可以直接写成一个属性名称即可. 115 }); 116 </script> 117 </body> 118 </html>
11、Vue Router路由管理器，Vue Router编程式导航。
答：1）、页面导航的两种方式，第一种是声明式导航，通过点击链接实现导航的方式，叫做声明式导航，例如普通网页中的<a></a>链接或者vue中的<route-link></route-link>
2）、第二种方式就是编程时航道，通过调用js形式的api实现导航的方式，叫做编程式导航。例如普通网页中的location.href。
3）、vue中的编程式导航，常用的编程式导航如this.$router.push('hash地址')、this.$route.go(n)实现历史记录中的前进和后退，1是前进，-1是后退;
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/1">User1</router-link> 17 <router-link to="/user/2">User2</router-link> 18 <!-- 要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象： --> 19 <router-link :to="{name:'user',params:{id:123456}}">User3</router-link> 20 <router-link to="/user/4">User4</router-link> 21 22 <router-link to="/register">Register</router-link> 23 24 <!-- 第三步,添加路由填充为 --> 25 <!-- 路由填充为也叫做路由占位符,将来通过路由规则匹配到的组件,将会被渲染到router-view所在的位置 --> 26 <router-view></router-view> 27 </div> 28 29 <script type="text/javascript"> 30 /* 第四步,定义路由组件 */ 31 var User = { 32 props: ['id', 'uname', 'age'], //使用props接收路由参数 33 // template: '<h1>User组件,用户为: {{id}} {{uname}} {{age}}</h1>', // 使用路由参数. 34 /* 编程式导航的使用 */ 35 template: ` 36 <div> 37 <h1>User组件,用户为: {{id}} {{uname}} {{age}}</h1> 38 <button @click="goRegister">跳转到注册页面</button> 39 </div> 40 `, 41 methods: { 42 goRegister: function() { 43 // 用编程式的方式控制路由跳转 44 this.$router.push('/register'); 45 } 46 }, 47 }; 48 var Register = { 49 template: ` 50 <div> 51 <h1>Register</h1> 52 <hr/> 53 <router-link to="/register/tab1">Tab1</router-link> 54 <router-link to="/register/tab2">Tab2</router-link> 55 56 <router-view></router-view> 57 58 <button @click="goBack">返回到上一步</button> 59 </div> 60 `, 61 //子级路由填充位置<router-view></router-view>, 62 methods: { 63 goBack: function() { 64 // 用编程式的方式控制路由跳转 65 this.$router.go('-1'); 66 } 67 }, 68 }; 69 70 var Tab1 = { 71 template: '<h1>Tab1</h1>', 72 }; 73 var Tab2 = { 74 template: '<h1>Tab2</h1>', 75 }; 76 77 /* 第五步,配置路由规则并创建路由实例。 */ 78 // 创建路由实例对象 79 var router = new VueRouter({ 80 // routes是路由规则数组 81 routes: [ 82 // 每个路由规则都是一个配置对象,其中至少包含path和component两个属性 83 // path表示当前路由规则匹配的hash地址 84 // component表示当前路由规则对应要展示的组件 85 { 86 path: '/user/:id', // 动态路由匹配 87 component: User, // 组件名称,不是字符串 88 /* 如果props是一个对象，它会被按原样设置为组件属性。 */ 89 /* props: { 90 uname: '张飒飒', 91 age: 12 92 }, */ 93 94 /* 如果props是一个函数， 则这个函数接收route对象为子级的形参 */ 95 /* route对象就是路由中的动态参数对象,路径中有几个参数项,route里面就有几个参数值. */ 96 props: route => ({ // 返回一个props对象 97 uname: '张飒飒', 98 age: 20, 99 id: route.params.id, 100 }), 101 /* 命名路由 */ 102 name: 'user', // 通过路由的name属性可以实现导航和跳转功能 103 }, 104 { 105 path: '/register', 106 component: Register, // 组件名称,不是字符串 107 // 通过children属性,为/register添加子路由规则 108 children: [{ 109 path: '/register/tab1', 110 component: Tab1 111 }, 112 { 113 path: '/register/tab2', 114 component: Tab2 115 }, 116 ] 117 }, 118 /* 其中,path表示需要被重定向的原地址,redirect表示将要被重定向到的新地址 */ 119 { 120 path: '/', 121 redirect: '/user' 122 } 123 ] 124 }); 125 126 // 创建vm实例对象 127 var vm = new Vue({ 128 // 指定控制的区域 129 el: '#app', 130 data: { 131 132 }, 133 // 第六步,把路由挂载到Vue根实例中 134 // 为了能够让路由规则生效,必须把路由对象挂载到Vue实例对象上 135 router: router, // 挂载实例对象,es6中,如果属性名称和值一样可以直接写成一个属性名称即可. 136 }); 137 </script> 138 </body> 139 </html>
