一切分离都是为了更好的结合，本文详细介绍了前后端分离架构之后，前端如果实现路由控制，即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. thinkphp配置到二级目录，不配置到根目录，访问除首页的其他路径都是404报错

    1.在nginx的配置里面,进行重定向 vi /etc/nginx/conf.d/default.conf 2.进入编辑 location /thinkphp/public { if (!-e $re ...

  2. UVA - 12174 Shuffle （预处理+滑动窗口）

    题意:已知歌单中的歌曲数目s,和部分的播放历史,问下一首可能播放的歌曲种数. 分析: 1.按照歌单数目s,将播放历史划分为几部分. 2.将播放历史的n首歌曲之前加上s首歌曲,之后加上s首歌曲,为防止标 ...

  3. 指令——cat

    作用1:cat有直接打开一个文件的功能,只看不用编辑. 语法:#cat 文件的路径 选项:-n, --number 对输出的所有行编号. 如:用cat查看/etc/passwd [root@local ...

  4. 【转载】Android Gradle Build Error:Some file crunching failed, see logs for details解决办法

    Android Gradle Build Error:Some file crunching failed, see logs for details解决办法 转载请标明出处: http://www. ...

  5. JavaWeb高级编程(下篇)

    Java标准标签库 JSP标签语法中包含一些简写可以帮助轻松编写JSP.这些简写中第一个就是taglib指令. <%@ taglib prefix="c" uri=" ...

  6. Python 35个内置函数，你都ok吗？

    Python一共有60多个内置函数,今天先梳理其中35 个 1 abs() 绝对值或复数的模 . In [1]: abs(-6)Out[1]: 6 2 all() 接受一个迭代器,如果迭代器的所有元素 ...

  7. 八十三、SAP中的ALV创建之二，ALV相关的类型池定义

    一.与ALV相关的类型都是在TYPE-POOLS:SLIS中.我们来到SE11 二.常用的定义有fieldca和layout等,用于显示字段,和控制信息数据等. 三.我们以VBAK表为例,用ALV输出 ...

  8. Python MySQL 创建数据库

    章节 Python MySQL 入门 Python MySQL 创建数据库 Python MySQL 创建表 Python MySQL 插入表 Python MySQL Select Python M ...

  9. 理解依赖注入（DI - Dependency Injection）

    系列教程 Spring 框架介绍 Spring 框架模块 Spring开发环境搭建(Eclipse) 创建一个简单的Spring应用 Spring 控制反转容器(Inversion of Contro ...

  10. BurpSuite详解

    转载自:http://www.nxadmin.com/tools/689.html 本文由阿德马翻译自国外网站,请尊重劳动成果,转载注明出处 Burp Suite是Web应用程序测试的最佳工具之一,其 ...