专栏首页别先生Vue前端路由

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实现导航的方式,叫做编程式导航。例如普通网页中的kk。 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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 大数据云计算学习路线图(纯属个人看法和观点)

    【ps:以下纯属个人观点和看法,有什么不对的,还请多多指教。】 1:之前发过一个Java攻城狮的学习路线图【ps:挺详细的~~~】: https://cloud...

    别先生
  • 使用SolrJ客户端管理SolrCloud(Solr集群)

    注意:集群中使用的配置文件是zookeeper统一管理的配置文件。如果修改了schema.xml配置文件,使用zkCli.sh脚本命令重新上传conf目录即可,...

    别先生
  • 常用Mysql或者PostGresql或者Greenplum的语句总结。

    1、使用mysql的union all可以同时查询出所有自己想要查询数据表的数据量。

    别先生
  • [译] Vue Router 之单元测试

    原文:https://github.com/tonylua/vue-testing-handbook/blob/master/src/zh-CN/vue-rou...

    江米小枣
  • Vue-router从入门到弃坑

    html页面(依次引入vue.js,router.js以及个人配置的app.js)

    十月梦想
  • 基于vue(element ui) + ssm + shiro 的权限框架

    现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目,网上有句话说,语言框架迭代太快了,我学不动了,不如回去搬...

    前端博客 : alili.tech
  • 锐捷路由技术 | 路由控制——ACL 与 prefix-list,distribute-list 与 route-map

    ACL可以用来过滤数据包,匹配ip报文的五大元素,prefix-list 只能用来匹配路由前缀

    网络技术联盟站
  • php数组hashtable的巧妙设计

    一个数组在 PHP 内核里是长什么样的呢?我们可以从 PHP 的源码里看到其结构如下:

    程序员养成日记
  • io.Reader 解析

    简介 io.Reader 是一个 Interface 类型,功能非常强大,在任何需要读的地方我们都尽量使用它。先来看下它的原型: type Reader int...

    李海彬
  • dubbo路由机制分析2(路由设置存储)

    接上次 https://cloud.tencent.com/developer/article/1109552 目前dubbo支持的路由类型分三种condito...

    技术蓝海

扫码关注云+社区

领取腾讯云代金券