2. 程式人生 > >Vue專題-路由系統

Vue專題-路由系統

阿新 • • 發佈：2018-11-09

一切分離都是為了更好的結合，本文詳細介紹了前後端分離架構之後，前端如果實現路由控制，即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>
 
 

            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
Vue專題-路由系統

     
 一切分離都是為了更好的結合，本文詳細介紹了前後端分離架構之後，前端如果實現路由控制，即Vue路由系統。 
Vue路由系統 
VueRouter實現原理 
VueRouter的實現原理是根據監控錨點值的改變，從而不斷修改元件內容來實現的，我們來試試不使用VueRouter，自己實現路由控制，如下程式碼： 
 
 



  
 

    


    
    
Vue-router   VUE路由系統

     
 close   value   tcs   -c   aps   put   訪問路徑   tps   lose    
一：定義：
是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用於構建單頁面應用。vue的單頁面應用是基於路由和組件的，路由用於設定訪問路徑，並將路徑和組件映射起來。傳統的頁 



  
 

    


    
    
Vue.js之路由系統

     
 Vue.js生態之vue-router 
vue-router是什麼? 
vue-router是Vue的路由系統，定位資源的，我們可以不進行整頁重新整理去切換頁面內容。 
vue-router的安裝與基本配置 
vue-router.js 可以下載 也可以用cdn，基本配置資訊看如下程式碼 
 
 // ht 



  
 

    


    
    
Day84 前端框架--Vue路由系統&Vue生命週期

     
 一，Vue路由系統 
　　Vue Router是Vue.js的官方路由器。它與Vue.js核心深度整合，能夠輕鬆構建單頁應用 
  
　　1.路由的註冊 
 
 <body>
<div id="app">
    <router-link to="/">首頁< 



  
 

    


    
    
Vue路由系統詳述

     
 
							
							
							一切分離都是為了更好的結合，本文詳細介紹了前後端架構分離之後，前端如何實現路由的控制，即Vue路由系統——VueRouter.



VueRouter實現原理：
根據錨點值的改變，修改元件內容.
我們先來看看不使用VueRouter，自己實現路由的控制，如下程 



  
 

    


    
    
ASP.NET MVC5路由系統機制詳細講解

     
 提交   eas   找文件   網址   自動調用   提取   ges   pri   stat   請求一個ASP.NET mvc的網站和以前的web form是有區別的，ASP.NET MVC框架內部給我們提供了路由機制，當IIS接受到一個請求時，會先看是否請求了一個靜態資源（.html,css,js 



  
 

    


    
    
路由系統

     
 模板   resp   solver   max   quest   空間   new   不同的   查看   路由系統
　　根據Django約定，一個WSGI應用裏最核心的部件有兩個：路由表和視圖。Django框架 的核心功能就是路由：根據HTTP請求中的URL，查找路由表，將HTTP請求分發到 不同的 



  
 

    


    
    
免費的上網行為管理系統和軟路由系統推薦。

     
 上網行為管理 網絡安全網關路由系統、又稱RouterOS，已經是一個非常開源的技術了。不管是在LINUX系統上的，還是在windows系統上的，都很很多這樣的開源項目，技術簡單，結構也非常單一。而隨著時代發展，後期又加上了VPN和基礎的包過濾防火墻，也都是開源成熟的項目。大部分廠家也是在這些項目上修修改改，包 



  
 

    


    
    
vue的路由

     
 一個   指定   charset   lin   component   mount   one   pan   out   先寫個基礎版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF 



  
 

    


    
    
Django 路由系統簡述

     
 url   django   在前面的例子裏面，我們已經了解，Django裏面可以通過在Project同名的那個目錄下的urls.py文件裏面配置路由，根據用戶輸入的url，調用不同的函數或者類的方法。下面看看具體的一些例子。單一的路由對應關系。這種方式最直接，前面已經多次出現, 可以是fbv或者cbv類型的 



  
 

    


    
    
vue.js路由

     
 ()   組件   其他   文檔   script   不同   -c   target   pre   Vue.js 路由
Vue.js 路由允許我們通過不同的 URL 訪問不同的內容。
通過 Vue.js 可以實現多視圖的單頁Web應用（single page web application，SPA）。 



  
 

    


    
    
【Vue】詳解Vue組件系統

     
 最終   文件   type   html中   emit   監聽   做了   駝峰命名   操作   Vue渲染的兩大基礎方式
new 一個Vue的實例
這個我們一般會使用在掛載根節點這一初始化操作上：

new Vue({
  el: ‘#app‘
})

 
註冊組件並使用
通過 



  
 

    


    
    
vue的路由初識01

     
 color   body   emp   ont   doctype   ams   match   -s   utf-8   
今天就做了一個vue-router的實例，（路由跳轉，參數的傳遞[一個參數，多個參數]）<!DOCTYPE html>
<html>
    <hea 



  
 

    


    
    
<keep-alive>控制Vue Router路由

     
 view   homepage   信息   app   keepal   div   path   router   class   只給部分組件加上<keep-alive>啊，在app.vue裏這樣

<!-- 這裏是需要keepalive的 -->
<keep-alive& 



  
 

    


    
    
vue.js路由參數簡單實例講解------簡單易懂

     
 .com   route   安裝   http   git   node   clas   span   ont   vue中，我們構建單頁面應用時候，一定必不可少用到vue-router
vue-router 就是我們的路由，這個由vue官方提供的插件
首先在我們項目中安裝vue-router路由依賴 



  
 

    


    
    
Django入門2:路由系統

     
 -c   clas   sdfas   ret   war   3-0   生成   實例   eee   1、單一路由對應
 　　url(r‘^index/‘, views.index), # FBV	   	　　url(r‘^home/‘, views.Home.as_view()),   # CBV
  



  
 

    


    
    
django中admin路由系統工作原理

     
 blog   items   module   程序   email   asc   @property   目的   urn   一、如圖所示

from django.contrib import admin
from . import models
class zhangsan(admin.ModelA 



  
 

    


    
    
Django之（URL）路由系統

     
 ces   strong   end   其中   意思   string   查找   hid   example   路由系統
簡而言之，django的路由系統作用就是使views裏面處理數據的函數與請求的url建立映射關系。使請求到來之後，根據urls.py裏的關系條目，去查找到與請求對應的處理方法，從 



  
 

    


    
    
django-路由系統url

     
 四種   表達   方式   pan   ase   html   class   htm   路由   一：django路由系統說明
　　路由都在urls文件裏，它將瀏覽器輸入的url映射到相應的業務處理邏輯 
二：django 常用路由系統配置    

    1）URL常用有模式一FBV（functi 



  
 

    


    
    
vue-router路由懶加載（解決vue項目首次加載慢）

     
 .com   alt   什麽   配置   過多   異常   減少   webpack   bpa   懶加載：----------------------------------------------------？
　　　　也叫延遲加載，即在需要的時候進行加載，隨用隨載。
為什麽需要懶加載？