一切分离都是为了更好的结合，本文详细介绍了前后端分离架构之后，前端如果实现路由控制，即Vue路由系统。

Vue路由系统

VueRouter实现原理

VueRouter的实现原理是根据监控锚点值的改变，从而不断修改组件内容来实现的，我们来试试不使用VueRouter，自己实现路由控制，如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
  <script src="../statics/vue-router.js"></script>
  <style>
    body {
      margin: 0;
    }
    .login {
      width: 100%;
      height: 1200px;

    }
    .register {
      width: 100%;
      height: 1200px;

    }
    .home {
      width: 100%;
      height: 1200px;

    }
    a {
      text-decoration: none;
    }
  </style>
</head>
<body>

    <div id="app">
      <a href="#/home">首页</a>
      <a href="#/login">登录</a>
      <a href="#/register">注册</a>
    </div>

    <script>
        let oDiv = document.getElementById("app");

        window.onhashchange = function () {
            console.log(location.hash);
            // vue-router的实现原理是根据锚点值的改变
            // 对页面进行切换
            switch (location.hash) {
                case "#/login":
                    oDiv.innerHTML = `<h3 class='login'>这是登录页面</h3>`;
                    break;
                case "#/register":
                    oDiv.innerHTML = `<h3 class='register'>这是注册页面</h3>`;
                    break;
                default:
                    oDiv.innerHTML = `<h3 class='home'>这是首页</h3>`;
                    break;
            }
        };
    </script>

</body>
</html>

可以看到，通过监控锚点值的改变，页面上面的内容可以跳转到我们需要显示的页面。

VueRouter安装使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
  <!--1. 引入vue-router-->
  <script src="../statics/vue-router.js"></script>
</head>
<body>

  <div id="app">

  </div>

  <script>
    let Home = {
      template: `
        <div>这是首页</div>
      `
    };

    let Login = {
      template: `
          <div>登录页面</div>
      `
    };

      let Register = {
        template: `
            <div>注册页面</div>
        `
      };

      let App = {
        template: `
          <div>
            <router-link to="/home">首页</router-link>
            <router-link to="/login">登录</router-link>
            <router-link to="/register">注册</router-link>

            <router-view></router-view>
          </div>
        `
      };

      // 2. 在vue中中使用vue-router对象
      Vue.use(VueRouter);

      // 3. 创建一个vue-router对象
      let router = new VueRouter({
        // 此处要特别注意是routes，不是routers
        routes: [
          {
            path: '/home',
            component: Home,
          },
            {
              path: "/login",
              component: Login
            },
            {
              path: "/register",
              component: Register,
            }
        ]
      });

      // 4. 在vue实例中使用新创建的vue-router对象
      new Vue({
        el: "#app",
        template: `<app></app>`,
        components: {
          "app": App,
        },
        router: router
      })
  </script>

</body>
</html>
VueRouter命名路由
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../statics/vue.min.js"></script>
    <!--1. 引入vue-router-->
    <script src="../statics/vue-router.js"></script>
</head>
<body>

    <div id="app"></div>

    <script>
        let Login = {
            template: `
                <div>登录页面</div>
            `
        };

        let Register = {
            template: `
                <div>注册页面</div>
            `
        };

        let App = {
            template: `
                <div>
                    <router-link :to="{ name: 'login'}">登录</router-link>
                    <router-link :to="{ name: 'register'}">注册</router-link>

                    <router-view></router-view>
                </div>
            `
        };

        // 在vue中中使用vue-router对象
        Vue.use(VueRouter);

        // 创建一个vue-router对象
        let router = new VueRouter({
            // 此处要特别注意是routes，不是routers
            routes: [
                {
                    name: 'login',
                    path: "/login",
                    component: Login
                },
                {
                    name: 'register',
                    path: "/register",
                    component: Register,
                }
            ]
        });

        // 在vue实例中使用新创建的vue-router对象
        new Vue({
            el: "#app",
            template: `<app></app>`,
            components: {
                "app": App,
            },
            router: router
        })
    </script>

</body>
</html>

此外，还有另一种命名路由方式，如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../statics/vue.min.js"></script>
    <!--1. 引入vue-router-->
    <script src="../statics/vue-router.js"></script>
</head>
<body>

    <div id="app"></div>

    <script>

        let App = {
            template: `
                <div>
                    <router-link to="/">首页</router-link>

                    <router-view name="header"></router-view>
                    <router-view name="footer"></router-view>

                </div>
            `
        };

        Vue.use(VueRouter);

        let router = new VueRouter({
            routes: [
                {
                    path: '/',
                    components: {
                        header: {
                            template: `
                                <div>头部</div>
                            `
                        },
                        footer: {
                            template: `
                                <div>底部</div>
                            `
                        }
                    }
                }
            ]
        });

        new Vue({
            el: "#app",
            template: `<app></app>`,
            router: router,
            components: {
                'app': App
            }
        })
    </script>

</body>
</html>
VueRouter路由中使用参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../statics/vue.min.js"></script>
    <!--1. 引入vue-router-->
    <script src="../statics/vue-router.js"></script>
</head>
<body>

    <div id="app"></div>

    <script>
        // 常用的两种查询方式
        // xxx.html/user/1
        // xxx.html/user/id=1

        let userParams = {
            template: `
                <div>用户一信息</div>
            `
        };

        let userQuery = {
            template: `
                <div>用户二信息</div>
            `
        };

        let App = {
            template: `
                <div>
                    <router-link :to="{ name: 'userParams', params: { userId: 1} }">用户一</router-link>
                    <router-link :to="{ name: 'userQuery', query: { userId: 2 } }">用户二</router-link>

                    <router-view></router-view>

                </div>
            `,
        };

        // 在vue中使用vue-router
        Vue.use(VueRouter);

        // 创建一个VueRouter对象
        let router = new VueRouter({
            routes: [
                {
                    name: 'userParams',
                    path: '/users/:userId',
                    component: userParams
                },
                {
                    name: 'userQuery',
                    path: '/users',
                    component: userQuery,
                }
            ]
        });

        // 在vue中使用vue-router
        new Vue({
            el: "#app",
            template: `<app></app>`,
            components: {
                'app': App,
            },
            router: router
        })
    </script>

</body>
</html>
VueRouter参数实现原理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../statics/vue.min.js"></script>
    <!--1. 引入vue-router-->
    <script src="../statics/vue-router.js"></script>
</head>
<body>

    <div id="app"></div>

    <script>
        // 常用的两种查询方式
        // xxx.html/user/1
        // xxx.html/user/id=1

        let userParams = {
            template: `
                <div>用户一信息</div>
            `,
            created () {
              console.log('this: ', this);
              console.log(this.$route);
              console.log(this.$route.params.userId);
              // 此时可以发送ajax请求到后端获取数据
            }
        };

        let userQuery = {
            template: `
                <div>用户二信息</div>
            `,
            created () {
              console.log(this.$route);
              console.log(this.$route.query.userId);
              // 此时可以发送ajax请求到后端获取数据
            }
        };

        let App = {
            template: `
                <div>
                    <router-link :to="{ name: 'userParams', params: { userId: 1} }">用户一</router-link>
                    <router-link :to="{ name: 'userQuery', query: { userId: 2 } }">用户二</router-link>

                    <router-view></router-view>

                </div>
            `,
        };

        // 在vue中使用vue-router
        Vue.use(VueRouter);

        // 创建一个VueRouter对象
        let router = new VueRouter({
            routes: [
                {
                    name: 'userParams',
                    path: '/users/:userId',
                    component: userParams
                },
                {
                    name: 'userQuery',
                    path: '/users',
                    component: userQuery,
                }
            ]
        });

        // 在vue中使用vue-router
        new Vue({
            el: "#app",
            template: `<app></app>`,
            components: {
                'app': App,
            },
            router: router,
          created () {
              console.log('this: ', this);
              console.log(this.$route);
            }
        })
    </script>

</body>
</html>
VueRouter子路由
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .home {
            width: 500px;
            height: 500px;

        }
        .courses {
            width: 500px;
            height: 500px;

        }

    </style>
    <script src="../statics/vue.min.js"></script>
    <!--1. 引入vue-router-->
    <script src="../statics/vue-router.js"></script>
</head>
<body>

    <div id="app"></div>

    <script>
        let Home = {
            template: `
                <div class="home">这是首页</div>
            `
        };

        let Courses = {
            template: `
                <div class="courses">课程页面
                    <div class="details">
                        <router-link to="details">课程详情</router-link>
                        <router-link to="students">学员故事</router-link>

                        <router-view></router-view>
                    </div>
                </div>
            `
        };

        let Details = {
            template: `
                <div>课程详情页</div>
            `
        };

        let Students = {
            template: `
                <div>学员故事</div>
            `
        };

        let App = {
            template: `
                <div>
                    <router-link to="/">首页</router-link>
                    <router-link to="/courses">课程页面</router-link>

                    <router-view></router-view>
                </div>
            `
        };

        let routes = [
            {
                path: '/',
                component: Home
            },
            {
                path: '/courses',
                component: Courses,
                children: [
                    {
                        path: 'details',
                        component: Details,
                    },
                    {
                        path: 'students',
                        component: Students
                    }
                ]
            }
        ];

        Vue.use(VueRouter);

        let router = new VueRouter({
            routes: routes,
        });

        new Vue({
            el: "#app",
            template: `<app></app>`,
            router: router,
            components: {
                'app': App,
            }
        })

    </script>

</body>
</html>
VueRouter子路由append
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .home {
            width: 500px;
            height: 500px;

        }
        .courses {
            width: 500px;
            height: 500px;

        }

    </style>
    <script src="../statics/vue.min.js"></script>
    <!--1. 引入vue-router-->
    <script src="../statics/vue-router.js"></script>
</head>
<body>

    <div id="app"></div>

    <script>
        let Home = {
            template: `
                <div class="home">这是首页</div>
            `
        };

        let Courses = {
            template: `
                <div class="courses">课程页面
                    <div class="details">
                        <router-link to="details" append>课程详情</router-link>
                        <router-link to="students">学员故事</router-link>

                        <router-view></router-view>
                    </div>
                </div>
            `
        };

        let Details = {
            template: `
                <div>课程详情页</div>
            `
        };

        let Students = {
            template: `
                <div>学员故事</div>
            `
        };

        let App = {
            template: `
                <div>
                    <router-link to="/">首页</router-link>
                    <router-link to="/courses">课程页面</router-link>

                    <router-view></router-view>
                </div>
            `
        };

        let routes = [
            {
                path: '/',
                component: Home
            },
            {
                path: '/courses',
                component: Courses,
                children: [
                    {
                        path: 'details',
                        component: Details,
                    },
                    {
                        path: 'students',
                        component: Students
                    }
                ]
            }
        ];

        Vue.use(VueRouter);

        let router = new VueRouter({
            routes: routes,
        });

        new Vue({
            el: "#app",
            template: `<app></app>`,
            router: router,
            components: {
                'app': App,
            }
        })

    </script>

</body>
</html>

使用以上方式，路径是写死在属性中的，所以子路径会不断的append到最后，导致访问不到相应页面。可以采用另一种，动态绑定属性，如下代码所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
  <script src="../statics/vue-router.js"></script>
  <style>
    body {
      margin: 0;
    }
    .all {
      width: 500px;
      height: 500px;
    }
    .home {

    }
    .login {

    }
    .register {

    }
    .courses {

    }
  </style>
</head>
<body>

  <div id="app"></div>

  <script>
    Vue.use(VueRouter);

    let Home = {
      template: `
        <div class="home all">
          <h1>这是首页页面</h1>
        </div>
      `
    };

    let Login = {
      template: `
        <div class="login all">
          <h1>这是登录页面</h1>
        </div>
      `
    };

    let Register = {
      template: `
        <div class="register all">
          <h1>这是注册页面</h1>
        </div>
      `
    };

    let Courses = {
      template: `
        <div class="courses all">
          <h1>这是课程页面</h1>
          <router-link :to="{ name: 'lightcourses' }" append>轻课</router-link>
          <router-link :to="{ name: 'degreecourses' }">学位课</router-link>

          <router-view><router-view>
        </div>
      `
    };

    let LightCourses = {
      template: `
        <div>
          <h1>这是学位课程页面</h1>
        </div>
      `
    };

    let DegreeCourses = {
      template: `
        <div>
          <h1>这是轻课课程页面</h1>
        </div>
      `
    };

    let App = {
      template: `
        <div>
          <router-link :to="{ name: 'home' }">首页</router-link>
          <router-link :to="{ name: 'login' }">登录</router-link>
          <router-link :to="{ name: 'register' }">注册</router-link>
          <router-link :to="{ name: 'courses' }">课程</router-link>

          <router-view><router-view>
        </div>
      `,
    };

    let routes = [
      {
        name: 'home',
        path: '/home',
        component: Home,
      },
      {
        name: 'login',
        path: '/login',
        component: Login,
      },
      {
        name: 'register',
        path: '/register',
        component: Register
      },
      {
        name: 'courses',
        path: '/courses',
        component: Courses,
        children: [
          {
            name: 'lightcourses',
            path: 'lightcourses',
            component: LightCourses
          },
          {
            name: 'degreecourses',
            path: 'degreecourses',
            component: DegreeCourses
          }
        ]
      }
    ];

    let router = new VueRouter({
      routes: routes,
      mode: 'history',
    });

    new Vue({
      el: "#app",
      template: `<App></App>`,
      components: {
        App,
      },
      router: router,
    })
  </script>

</body>
</html>

注意，必须使用name查找组件和路径的对应关系，而不能使用path。

VueRouter子路由非append
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .home {
            width: 500px;
            height: 500px;

        }
        .courses {
            width: 500px;
            height: 500px;

        }

    </style>
    <script src="../statics/vue.min.js"></script>
    <!--1. 引入vue-router-->
    <script src="../statics/vue-router.js"></script>
</head>
<body>

    <div id="app"></div>

    <script>
        let Home = {
            template: `
                <div class="home">这是首页</div>
            `
        };

        let Courses = {
            template: `
                <div class="courses">课程页面
                    <div class="details">
                        <router-link to="/courses/details">课程详情</router-link>
                        <router-link to="/courses/students">学员故事</router-link>

                        <router-view></router-view>
                    </div>
                </div>
            `
        };

        let Details = {
            template: `
                <div>课程详情页</div>
            `
        };

        let Students = {
            template: `
                <div>学员故事</div>
            `
        };

        let App = {
            template: `
                <div>
                    <router-link to="/">首页</router-link>
                    <router-link to="/courses">课程页面</router-link>

                    <router-view></router-view>
                </div>
            `
        };

        let routes = [
            {
                path: '/',
                component: Home
            },
            {
                path: '/courses',
                component: Courses,
                children: [
                    {
                        path: '/courses/details',
                        component: Details,
                    },
                    {
                        path: '/courses/students',
                        component: Students
                    }
                ]
            }
        ];

        Vue.use(VueRouter);

        let router = new VueRouter({
            routes: routes,
        });

        new Vue({
            el: "#app",
            template: `<app></app>`,
            router: router,
            components: {
                'app': App,
            }
        })

    </script>

</body>
</html>
VueRouter路由重定向redirect
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .home {
            width: 500px;
            height: 500px;

        }
        .login {
            width: 500px;
            height: 500px;

        }

    </style>
    <script src="../statics/vue.min.js"></script>
    <!--1. 引入vue-router-->
    <script src="../statics/vue-router.js"></script>
</head>
<body>

    <div id="app"></div>

    <script>
        let Home = {
            template: `
                <div class="home">这是首页</div>
            `
        };

        let Login = {
            template: `
                <div class="login">这是登录页面</div>
            `
        };

        let Details = {
            template: `
                <div>课程详情页</div>
            `
        };

        let App = {
            template: `
                <div>
                    <router-link to="/">首页</router-link>
                    <router-link to="/login">登录页面</router-link>
                    <router-link to="/details">课程详情页</router-link>

                    <router-view></router-view>
                </div>
            `
        };

        let routes = [
            {
                path: '/',
                component: Home
            },
            {
                path: '/login',
                component: Login,
            },
            {
                path: '/details',
                redirect: '/login',
                component: Details
            }
        ];

        Vue.use(VueRouter);

        let router = new VueRouter({
            routes: routes,
        });

        new Vue({
            el: "#app",
            template: `<app></app>`,
            router: router,
            components: {
                'app': App,
            }
        })

    </script>

</body>
</html>
VueRouter手动路由
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .home {
            width: 500px;
            height: 500px;

        }
        .details {
            width: 500px;
            height: 500px;

        }
    </style>
    <script src="../statics/vue.min.js"></script>
    <!--1. 引入vue-router-->
    <script src="../statics/vue-router.js"></script>
</head>
<body>

    <div id="app"></div>

    <script>
        let Home = {
            template: `
                <div>
                    <div class="home">这是首页</div>
                </div>
            `,
        };

        let Details = {
            template: `
                <div class="details">课程详情页</div>
            `
        };

        let App = {
            template: `
                <div>
                    <router-link to="/">首页</router-link>
                    <button @click="myClick">点击跳转到课程详情页面</button>

                    <router-view></router-view>
                </div>
            `,
            methods: {
                myClick: function () {
                    this.$router.push('/details');
                }
            }
        };

        let routes = [
            {
                path: '/',
                component: Home
            },
            {
                path: '/details',
                component: Details
            }
        ];

        Vue.use(VueRouter);

        let router = new VueRouter({
            routes: routes,
        });

        new Vue({
            el: "#app",
            template: `<app></app>`,
            router: router,
            components: {
                'app': App,
            }
        })

    </script>

</body>
</html>
VueRouter路由钩子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .home {
            width: 500px;
            height: 500px;

        }
        .login {
            width: 500px;
            height: 500px;

        }
        .user {
            width: 500px;
            height: 500px;

        }

    </style>
    <script src="../statics/vue.min.js"></script>
    <!--1. 引入vue-router-->
    <script src="../statics/vue-router.js"></script>
</head>
<body>

    <div id="app"></div>

    <script>
        let homePage = {
            template: `
                <div class="home"><h3>这是首页</h3></div>
            `
        };

        let loginPage = {
            template: `
                <div class="login"><h3>这是登录页面</h3></div>
            `
        };

        let userPage = {
            template: `
                <div class="user"><h3>这是用户管理页面</h3></div>
            `
        };

        let App = {
            template: `
                <div>
                    <router-link to="/">首页</router-link>
                    <router-link to="/login">登录</router-link>
                    <router-link to="userinfo">用户</router-link>

                    <router-view></router-view>
                </div>
            `
        };

        let routes = [
            {
                path: '/',
                component: homePage
            },
            {
                path: '/login',
                component: loginPage,
            },
            {
                path: '/userinfo',
                component: userPage,
            }
        ];

        Vue.use(VueRouter);

        let router = new VueRouter({
            routes: routes,
        });

        router.beforeEach(function (to, from, next) {
            // 如果next的参数是具体的路径，则跳转到该路径
            // 如果next没有被传入参数，则什么都不做，保持原来不变
            // 如果next的参数是一个error实例，跳转终止
            next();
        });

        new Vue({
            el: "#app",
            template: `<app></app>`,
            components: {
                'app': App
            },
            router: router,
        })
    </script>

</body>
</html>
VueRouter在路径中去掉井号

在创建路由实例时，我们可以新增一个属性，该属性用来去掉在路径中显示井号，它的属性名为mode，属性值为’history’。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../statics/vue.min.js"></script>
  <script src="../statics/vue-router.js"></script>
  <style>
    body {
      margin: 0;
    }
    .box {
      line-height: 100px;
      text-align: center;
    }
    .home {

      width: 500px;
      height: 500px;
    }
    .login {

      width: 500px;
      height: 500px;
    }
    .register {

      width: 500px;
      height: 500px;
    }
  </style>
</head>
<body>

  <div id="app"></div>

  <script>
    Vue.use(VueRouter);

    let Home = {
      template: `
        <div class="home">
          <h1>这是首页页面</h1>
        </div>
      `
    };

    let Login = {
      template: `
        <div class="login">
          <h1>这是登录页面</h1>
        </div>
      `
    };

    let Register = {
      template: `
        <div class="register">
          <h1>这是注册页面</h1>
        </div>
      `
    };

    let App = {
      template: `
        <div>
          <router-link :to="{ name: 'home' }">首页</router-link>
          <router-link :to="{ name: 'login' }">登录</router-link>
          <router-link :to="{ name: 'register' }">注册</router-link>

          <router-view><router-view>
        </div>
      `,
    };

    let routes = [
      {
        name: 'home',
        path: '/home',
        component: Home,
      },
      {
        name: 'login',
        path: '/login',
        component: Login,
      },
      {
        name: 'register',
        path: '/register',
        component: Register
      }
    ];

    let router = new VueRouter({
      routes: routes,
      mode: 'history',
    });

    new Vue({
      el: "#app",
      template: `<App></App>`,
      components: {
        App,
      },
      router: router,
    })
  </script>

</body>
</html>
VueRouter路由钩子实现登录认证
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .home {
            width: 500px;
            height: 500px;

        }
        .login {
            width: 500px;
            height: 500px;

        }
        .user {
            width: 500px;
            height: 500px;

        }

    </style>
    <script src="../statics/vue.min.js"></script>
    <!--1. 引入vue-router-->
    <script src="../statics/vue-router.js"></script>
</head>
<body>

    <div id="app"></div>

    <script>
        let homePage = {
            template: `
                <div class="home"><h3>这是首页</h3></div>
            `
        };

        let loginPage = {
            template: `
                <div class="login"><h3>这是登录页面</h3></div>
            `
        };

        let userPage = {
            template: `
                <div class="user">
                    <router-link to="/userinfo/userInt">自我介绍</router-link>
                    <router-link to="/userinfo/userStudy">学习中心</router-link>

                    <router-view></router-view>
                    <h3>这是用户管理页面</h3>
                </div>
            `
        };

        let userIntr = {
            template: `
                <div>自我介绍页面</div>
            `
        };

        let userStudy = {
            template: `
                <div>学习中心</div>
            `
        };

        let App = {
            template: `
                <div>
                    <router-link to="/">首页</router-link>
                    <router-link to="/login">登录</router-link>
                    <router-link to="userinfo">用户</router-link>

                    <router-view></router-view>
                </div>
            `
        };

        let routes = [
            {
                path: '/',
                component: homePage
            },
            {
                path: '/login',
                component: loginPage,
            },
            {
                path: '/userinfo',
                // meta对象里面的属性可以自定义, 都会加载到route实例中
                meta: { required_login: true },
                component: userPage,
                children: [
                    {
                        path: '/userinfo/userIntr',
                        meta: { required_login: true },
                        component: userIntr
                    },
                    {
                        path: '/userinfo/userStudy',
                        meta: { required_login: true },
                        component: userStudy,
                    }
                ]
            }
        ];

        Vue.use(VueRouter);

        let router = new VueRouter({
            routes: routes,
        });

        router.beforeEach(function (to, from, next) {
            // 如果next的参数是具体的路径，则跳转到该路径
            // 如果next没有被传入参数，则什么都不做，保持原来不变
            // 如果next的参数是一个error实例，跳转终止
            if ( to.meta.required_login ) {
                next('/login');
            } else {
                next();
            }
        });

        new Vue({
            el: "#app",
            template: `<app></app>`,
            components: {
                'app': App
            },
            router: router,
        })
    </script>

</body>
</html>
VueRouter实现路飞首页轮播图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../statics/vue.min.js"></script>
    <script src="../statics/vue-router.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .header {
            width: 100%;
        }
        .header img {
            position: absolute;
            left: 80px;
            top: -4px;
            width: 118px;
            height: 70px;
            z-index: 999;
        }
        .el-menu {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
        }
        .banner_img {
            width: 100%;
            height: 480px;
        }

    </style>
</head>
<body>

    <div id="app">

    </div>

    <template id="header">
        <div class="header">
            <img src="https://www.luffycity.com/static/img/head-logo.a7cedf3.svg"/>
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :router="true">
                <el-menu-item v-for="( item, index ) in headerLinks" :index="item.path" :key="index">{{ item.name }}</el-menu-item>
            </el-menu>
        </div>
    </template>

    <template id="homeimg">
        <el-carousel indicator-position="outside" height="480px">
            <el-carousel-item v-for="item in homePageImgArray" :key="item">
                <img :src="item.sources" class="banner_img"/>
            </el-carousel-item>
        </el-carousel>
    </template>

    <template id="footer">
        <div class="footer">
            <el-menu class="el-menu-demo" mode="horizontal" background-color="black">
                <el-menu-item index="1">关于我们</el-menu-item>
                <el-menu-item index="2">联系我们</el-menu-item>
                <el-menu-item index="3">商业合作</el-menu-item>
                <el-menu-item index="4">帮助中心</el-menu-item>
                <el-menu-item index="5">意见反馈</el-menu-item>
                <el-menu-item index="6">新手指南</el-menu-item>
            </el-menu>
        </div>
    </template>

    <script>
        // 如果需要动态绑定属性，必须加上冒号，否则属性后面的值会被当成固定的

        let Home = {
            template: "#homeimg",
            data() {
                return {
                    homePageImgArray: [
                        { sources: 'https://hcdn1.luffycity.com/static/frontend/index/banner1(4)_1539945492.0492468.png', id: 1 },
                        { sources: 'https://hcdn1.luffycity.com/static/frontend/index/%E9%AA%91%E5%A3%AB(1)_1539945488.713867.png', id: 2 },
                        { sources: 'https://hcdn1.luffycity.com/static/frontend/index/banner%203_1538021864.9051478.png', id: 3 },
                        { sources: 'https://hcdn1.luffycity.com/static/frontend/index/banner11_1538122470.2779157.png', id: 4 },
                        { sources: 'https://hcdn1.luffycity.com/static/frontend/index/home-banner4_1535545832.4715614.png', id: 5 },
                    ]
                }
            }
        };

        let freeCourses = {
            template: `
                <div>这是免费课程页面</div>
            `
        };

        let lightCourses = {
            template: `
                <div>这是轻课页面</div>
            `
        };

        let degreeCourses = {
            template: `
                <div>这是学位课程页面</div>
            `
        };

        let Questions = {
            template: `
                <div>这是智能题库页面</div>
            `
        };

        let openCourses = {
            template: `
                <div>这是公开课页面</div>
            `
        };

        let innerCourses = {
            template: `
                <div>这是内部教材页面</div>
            `
        };

        let pageHeader = {
            template: "#header",
            data() {
                return {
                    activeIndex: "1",
                    headerLinks: [
                        { path: '/', name: "首页" },
                        { path: '/free_courses', name: '免费课程'},
                        { path: '/light_courses', name: '轻课'},
                        { path: '/degree_courses', name: '学位课程'},
                        { path: '/questions', name: '智能题库'},
                        { path: '/open_courses', name: '公开课'},
                        { path: '/inner_courses', name: '内部教材'}
                    ],
                    footerLinks: []
                }
            }
        };

        let pageFooter = {
            template: "#footer",
        };

        let App = {
            template: `
                <div id="app">
                    <div>
                        <page-header></page-header>
                    </div>
                    <div>
                        <page-footer></page-footer>
                    </div>
                    <router-view></<router<-view>
                </div>
            `,
            components: {
                'page-header': pageHeader,
                'page-footer': pageFooter,
            }
        };

        let routes = [
            {
                path: '/',
                component: Home
            },
            {
                path: '/free_courses',
                component: freeCourses
            },
            {
                path: '/light_courses',
                component: lightCourses
            },
            {
                path: '/degree_courses',
                component: degreeCourses
            },
            {
                path: '/questions',
                component: Questions
            },
            {
                path: '/open_courses',
                component: openCourses
            },
            {
                path: '/inner_courses',
                component: innerCourses
            }
        ];

        Vue.use(VueRouter);

        let router = new VueRouter({
            routes: routes
        });

        new Vue({
            el: "#app",
            template: `<app></app>`,
            components: {
                'app': App,
            },
            router: router,
            data: {

            }
        })

    </script>
</body>
</html>

Vue专题-路由系统的更多相关文章

  1. Vue.js之路由系统

    Vue.js生态之vue-router vue-router是什么? vue-router是Vue的路由系统,定位资源的,我们可以不进行整页刷新去切换页面内容. vue-router的安装与基本配置 ...

  2. 04Vue.js路由系统

    Vue.js路由系统: https://pizzali.github.io/2018/10/28/Vue.js%E8%B7%AF%E7%94%B1%E7%B3%BB%E7%BB%9F/

  3. 10.3 Vue 路由系统

     Vue 路由系统  简单示例 main.js  import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...

  4. Vue路由系统

    Vue路由系统 一切分离都是为了更好的结合,本文详细介绍了前后端分离架构之后,前端如何实现路由控制,即Vue路由系统. 一.VueRouter实现原理 VueRouter的实现原理是根据监控锚点值的改 ...

  5. 【Vue路由系统详述】

    目录 路由命名 路由参数 路由参数的实现原理 子路由 子路由之append 动态绑定属性 子路由之append升级版 子路由之非append 路由重定向 手动路由 路由钩子 在路径中去掉"# ...

  6. vue 专题 vue2.0各大前端移动端ui框架组件展示

    Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...

  7. 基于Vue实现后台系统权限控制

    原文地址:http://refined-x.com/2017/08/29/基于Vue实现后台系统权限控制/,转载请注明出处. 用Vue/React这类双向绑定框架做后台系统再适合不过,后台系统相比普通 ...

  8. 简简单单的Vue3（插件开发，路由系统，状态管理）

    既然选择了远方,便只顾风雨兼程 __ HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 插件 路由(vue-router) 状态管理模式(Vuex) 那在上篇文章,我们讲了, ...

  9. vue权限路由实现方式总结二

    之前已经写过一篇关于vue权限路由实现方式总结的文章,经过一段时间的踩坑和总结,下面说说目前我认为比较"完美"的一种方案:菜单与路由完全由后端提供. 菜单与路由完全由后端返回 这种 ...

随机推荐

  1. 每天一点点之vue框架开发 - @click-native-prevent

    1.在封装好的组件上使用,所以要加上.native才能click 2.prevent就相当于..event.preventDefault() 所以@click.native.prevent是用来阻止默 ...

  2. JD-Store购物网站复盘——20170312

    一.商店技术架构 1.主题 2.涉及技术点: 3.核心业务功能 4.角色 5.用户故事 二.实现步骤 专案基础设施 上传图片模块 购物车 订单 支付&寄信 专案源码 三.第三方服务应用 支付 ...

  3. 虚拟机安装centos6.5出现Error processing drive:pci-0000:00:10-scsi-0:0:0:0问题

    vmware安装linux系统出现Error processing drive:pci-0000:00:10-scsi-0:0:0:0问题 问题出现原因:我给虚拟机的内存太小了,只给了512M 解决办 ...

  4. Inheritance and the prototype chain 继承和 原型 链

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain Inherita ...

  5. hex、Base64

    一.什么是Hex 将每一个字节表示的十六进制表示的内容,用字符串来显示. 二.作用 将不可见的,复杂的字节数组数据,转换为可显示的字符串数据 类似于Base64编码算法 区别:Base64将三个字节转 ...

  6. UVA - 11149 Power of Matrix（矩阵倍增）

    题意:已知N*N的矩阵A,输出矩阵A + A2 + A3 + . . . + Ak,每个元素只输出最后一个数字. 分析: A + A2 + A3 + . . . + An可整理为下式, 从而可以用lo ...

  7. javascript 解决provisional headers are shown的过程

    请求没有被发送,因为是载入缓存资源. 大概是说 完全相同的请求间隔数毫秒(太短),导致加载失败,查看了chrome控制台发现 Provisional headers are shown 出现在 载入缓 ...

  8. Day3-T1

    原题目 Describe:暴力出奇迹 [ 注意步长0.5!] code: #include<bits/stdc++.h> using namespace std; inline int r ...

  9. 对spring中IOC和AOP的理解

    IOC:控制反转也叫依赖注入.利用了工厂模式. 为了方便理解,分解成每条以便记忆.  1.将对象交给容器管理,你只需要在spring配置文件总配置相应的bean,以及设置相关的属性,让spring容器 ...

  10. 使用eclipse创建maven时遇到的问题

    转自https://www.cnblogs.com/hongmoshui/p/7994759.html   1.在eclipse中用maven创建项目,右键new>>Maven Proje ...