一切分离都是为了更好的结合，本文详细介绍了前后端分离架构之后，前端如果实现路由控制，即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. TBLASTN

    TBLASTN search translated nucleotide databases using a protein query

  2. 洛谷 P2426 删数

    题目传送门 解题思路: 区间DP,f[i][j]表示区间i~j可获得的最大值,因为本题的所有区间是可以直接一次性把自己全删掉的,所以所有区间初始化为被一次性删除的值,然后枚举断点,跑区间DP. AC代 ...

  3. idea中使用maven运行wordcount代码

    1.创建maven项目 pom文件: <?xml version="1.0" encoding="UTF-8"?> <project xmln ...

  4. php.laravel.部署

    Laravel 的部署 D  参考laravel-china的做 | 其他参考 | 重要的参考 | Nginx github | 如果想要ssl 啊

  5. IPv6-isis配置

    ①:ipv6 unicast-routing——开启IPv6路由功能 ②:router isis word——开启ISIS进程 ③:is-type——可以修改路由器ISIS等级 ④:进入接口 ⑤:启用 ...

  6. 2-Java基本数据类型和运算符

    目录 Java基本类型 Java数据类型转换 Java运算符 1.Java基本类型 1.1.boolean布尔 - 只有true和false两种值,在内存中占1bits(位),默认是false 1.2 ...

  7. js加密（十四）mail.yw.gov.cn/ RSA

    1. url: http://mail.yw.gov.cn/ 2. target:登录js 3. 简单分析: 寻找加密js: 3.1 直接寻找加密的参数p是不好找的,所以我们试着去寻找一些更明显的参数 ...

  8. 【Android】家庭记账本手机版开发报告五

    一.说在前面   昨天  1.添加菜单(查询.清除所有等)2.使用滑动删除   今天 1.创建登入和注册界面 2.向数据库添加一张用户表   问题 做完后在登入时有bug(未解决) 二.界面的搭建 1 ...

  9. ES6 - 装饰器 - Decorater

        注意,修饰器对类的行为的改变,是代码编译时发生的,而不是在运行时.这意味着,修饰器能在编译阶段运行代码.也就是说,修饰器本质就是编译时执行的函数.   修饰器是一个对类进行处理的函数.修饰器函 ...

  10. Codeforces 444C 线段树 懒惰标记

    前天晚上的CF比赛div2的E题,很明显一个线段树,当时还在犹豫复杂度的问题,因为他是区间修改和区间查询,肯定是要用到懒惰标记. 然后昨天真的是给这道题跪了,写了好久好久,...我本来是写了个add标 ...