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>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-04-24 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
