2. 程式人生 > >Vue路由系統詳述

Vue路由系統詳述

阿新 • • 發佈：2018-12-20

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

VueRouter實現原理：

根據錨點值的改變，修改元件內容.

我們先來看看不使用VueRouter，自己實現路由的控制，如下程式碼：

<body>
<div id="app"></div>
<script>
    let oDiv = document.getElementById('app');
    window.onhashchange = function () {
        // vue-router的實現原理是根據錨值的改變來對頁面進行切換
 

        switch (location.hash) {
            case '#/login':
                oDiv.innerHTML=`<h1>我是登陸頁面</h1>`;
                break;
            case '#/register':
                oDiv.innerHTML = `<h1>我是註冊頁面</h1>`;
                break;
            // 輸入其他路徑將顯示為首頁
            default
 
:
                oDiv.innerHTML = `<h1>我是首頁</h1>`;
                break;
        }
    };
    console.log(location.hash);
</script>
</body>

測試效果如下圖： 在這裡插入圖片描述 可以看到，通過改變錨點值，頁面跳轉到我們需要的內容.

再來看看VueRouter實現路由的控制：

<body>
<div id="app"></div>
<script>
    // 第一步：在Vue根例項中使用VueRouter
 

    Vue.use(VueRouter);
    let Home = {
        template: `
            <div>
                <h1>我是首頁</h1>
            </div>
        `,
    };
    let Login = {
        template: `
            <div>
                <h1>我是登陸頁面</h1>
            </div>
        `,
    };
    let Register = {
        template: `
            <div>
                <h1>我是註冊頁面</h1>
            </div>
        `,
    };
    let App = {
        // 下面的router-link會渲染成a標籤，to為標籤的href屬性，to後面是router中定義的路徑
        // 下面的router-view是頁面內容的渲染出口
        template: `
            <div>
                <router-link to="/">首頁</router-link>
                <router-link to="/login">登陸</router-link>
                <router-link to="/register">註冊</router-link>
                <router-view></router-view>
            </div>
        `,
    };
    // 第二步：例項化一個router物件(本質上是將路徑和頁面綁定了對應關係)
    let router = new VueRouter({
        routes: [
            // 注意：routes，不是routers
            {
                path: '/',
                component: Home,
            },
            {
                path: '/login',
                component: Login,
            },
            {
                path: '/register',
                component: Register,
            },
        ],
    });
    new Vue({
        el: '#app',
        template: `<App/>`,
        // 第三步：在根例項中註冊router物件
        router: router,
        components: {
            App,
        },
    });
</script>
</body>

測試效果如下圖： 在這裡插入圖片描述

路由命名

方式一： 通過在vue-router物件中增加name屬性來指定路由名稱. 呼叫方式：v-bind:to={ name: “路由名稱” }

<body>
<div id="app"></div>
<script>
    // 在Vue根例項中使用VueRouter
    Vue.use(VueRouter);
    let Home = {
        template: `
            <div>
                <h1>我是首頁</h1>
            </div>
        `,
    };
    let Login = {
        template: `
        <div>
            <h1>我是登陸頁面</h1>
        </div>
        `,
    };
    let Register = {
        template: `
            <div>
                <h1>我是註冊頁面</h1>
            </div>
        `,
    };
    let App = {
        // 下面的router-link會渲染成a標籤，to為a標籤的href屬性，to後面的name指定的是路由別名
        // 下面的router-view是頁面內容的渲染出口
        // 通過v-bind繫結定義的路由名稱, v-bind:to="{ ... }", 可簡寫為:to="{ ... }"
        template: `
            <div>
                <router-link v-bind:to="{ name: 'home' }">首頁</router-link>
                <router-link :to="{ name: 'login' }">登陸</router-link>
                <router-link :to="{ name: 'register' }">註冊</router-link>
                <router-view></router-view>
            </div>
        `,
    };
    // 例項化一個router物件(本質上是將路徑和頁面內容綁定了對應關係)
    let router = new VueRouter({
        // 注意：routes, 不是routers
        routes: [
            {
                // 路由命名
                name: 'home',
                path: '/',
                component: Home,
            },
            {
                name: 'login',
                path: '/login',
                component: Login,
            },
            {
                name: 'register',
                path: '/register',
                component: Register,
            },
        ],
    });
    new Vue({
        el: '#app',
        template: `<App/>`,
        // 在根例項中註冊router物件
        router: router,
        components: {
            App,
        },
    });
</script>
</body>

方式二：

<body>
<div id="app"></div>
<script>
    Vue.use(VueRouter);
    let App = {
        template: `
        <div>
            <router-link to="/">首頁</router-link>
            <router-view name="header"></router-view>
            <router-view name="footer"></router-view>
        </div>
    `,
    };
    let router = new VueRouter({
        routes: [
            {
                path: '/',
                components: {
                    header: {
                        template: `
                            <div>頭部</div>
                        `,
                    },
                    footer: {
                        template: `
                            <div>底部</div>
                        `,
                    },
                },
            },
        ],
    });
    new Vue({
        el: '#app',
        template: `<App/>`,
        router: router,
        components: {
            App,
        },
    });
</script>
</body>

路由引數

<body>
<div id="app"></div>
<script>
    /*
    在真實的場景中，有以下兩種路徑形式：
    1. xx.html/user/1
    2. xx.html/user/?userId=1
     */
    // 在Vue根例項中使用VueRouter
    Vue.use(VueRouter);
    let Home = {
        template: `
            <div>
                <h1>我是主頁面</h1>
            </div>
        `,
    };
    let userParams = {
        template: `
            <div>
                <h1>我是使用者1的資訊</h1>
            </div>
        `,
    };
    let userQuery = {
        template: `
            <div>
                <h1>我是使用者2的資訊</h1>
            </div>
        `,
    };
    let App = {
        // 下面的router-link會渲染成a標籤，to為a標籤的href屬性，to後面的name指定的是路由別名
        // 下面的router-view是頁面內容的渲染出口
        // 通過v-bind繫結路由名稱, v-bind:to="{ ... }", 可簡寫為:to="{ ... }"
        // 下面params與query引數分別對應上面所說的兩種路徑形式
        template: `
            <div>
                <router-link :to="{ name: 'home' }">首頁</router-link>
                <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-router物件(本質上是將路徑和頁面內容綁定了對應關係)
    let router = new VueRouter({
        routes: [
            {
                name: 'home',
                path: '/',
                component: Home,
            },
            {
                // 1. xx.html/user/1
                name: 'userParams',
                path: '/user/:userId',
                component: userParams,
            },
            {
                // 2. xx.html/user/?userId=1
                name: 'userQuery',
                path: '/user',
                component: userQuery,
            },
        ],
    });
    new Vue({
        el: '#app',
        template: `<App/>`,
        // 在跟例項中註冊router物件
        router: router,
        components: {
            App,
        },
    });
</script>
</body>

測試效果如下圖： 在這裡插入圖片描述 在這裡插入圖片描述

路由引數的實現原理

<body>
<div id="app"></div>
<script>
    /*
    在真實的場景中，有以下兩種路徑形式：
    1. xx.html/user/1
    2. xx.html/user/?userId=1
     */
    // 在Vue根例項中使用VueRouter
    Vue.use(VueRouter);
    let Home = {
        template: `
            <div>
                <h1>我是主頁面</h1>
            </div>
        `,
    };
    let userParams = {
        template: `
            <div>
                <h1>我是使用者1的資訊</h1>
            </div>
        `,
        created () {
            console.log('this.$route:', this.$route);
            console.log('userId:', this.$route.params.userId);
            // 此時可以傳送ajax請求到後端獲取資料
        },
    };
    let userQuery = {
        template: `
            <div>
                <h1>我是使用者2的資訊</h1>
            </div>
        `,
        created () {
            console.log('this.$route:', this.$route);
            console.log('userId:', this.$route.query.userId);
            // 此時可以傳送ajax請求到後端獲取資料
        }
    };
    let App = {
        // 下面的router-link會渲染成a標籤，to為a標籤的href屬性，to後面的name指定的是路由別名
        // 下面的router-view是頁面內容的渲染出口
        // 通過v-bind繫結路由名稱, v-bind:to="{ ... }", 可簡寫為:to="{ ... }"
        // 下面params與query引數分別對應上面所說的兩種路徑形式
        template: `
            <div>
                <router-link :to="{ name: 'home' }">首頁</router-link>
                <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-router物件(本質上是將路徑和頁面內容綁定了對應關係)
    let router = new VueRouter({
        routes: [
            {
                name: 'home',
                path: '/',
                component: Home,
            },
            {
                // 1. xx.html/user/1
                name: 'userParams',
                path: '/user/:userId',
                component: userParams,
            },
            {
                // 2. xx.html/user/?userId=1
                name: 'userQuery',
                path: '/user',
                component: userQuery,
            },
        ],
    });
    new Vue({
        el: '#app',
        template: `<App/>`,
        // 在跟例項中註冊router物件
        router: router,
        components: {
            App,
        },
    });
</script>
</body>

測試效果如下圖： 在這裡插入圖片描述 在這裡插入圖片描述

子路由

<body>
<div id="app"></div>
<script>
    // 在Vue根例項中使用VueRouter
    Vue.use(VueRouter);
    let Home = {
        template: `
            <div>
                <h1>我是首頁</h1>
            </div>
        `,
    };
    let Test = {
        template: `
            <div>
                <h1>我是測試頁面</h1>
                <router-link to="childpages01">子頁面01</router-link>
                <router-link to="childpages02">子頁面02</router-link>
                <router-view></router-view>
            </div>
        `,
    };
    let ChildPages01 = {
        template: `
            <div>
                <h1>我是子頁面01</h1>
            </div>
        `,
    };
    let ChildPages02 = {
        template: `
            <div>
                <h1>我是子頁面02</h1>
            </div>
        `,
    };
    let App = {
        template: `
            <div>
                <router-link :to="{ name: 'home' }">首頁</router-link>
                <router-link :to="{ name: 'test' }">測試頁面</router-link>
                <router-view></router-view>
            </div>
        `,
    };
    // 例項化一個router物件(本質上是將路徑和頁面內容綁定了對應關係)
    let router = new VueRouter({
        routes: [
            {
                name: 'home',
                path: '/',
                component: Home,
            },
            {
                name: 'test',
                path: '/courses',
                component: Test,
                // children實現子路由(子頁面)
                children: [
                    {
                        path: 'childpages01',
                        component: ChildPages01,
                    },
                    {
                        path: 'childpages02',
                        component: ChildPages02,
                    },
                ],
            },
        ],
    });
    new Vue({
        el: '#app',
        template: `<App/>`,
        // 在根例項中註冊router物件
        router: router,
        components: {
            App,
        },
    });
</script>
</body>

測試效果如下圖： 在這裡插入圖片描述 可見，使用此方法，子頁面不能正常顯示.

子路由之append

append引數會在路徑後面追加子路由的路徑，注意：會在後面一直追加. append引數只適用於只需一層子路由的情況.

<body>
<div id="app"></div>
<script>
    // 在Vue根例項中使用VueRouter
    Vue.use(VueRouter);
    let Home = {
        template: `
            <div>
                <h1>我是首頁</h1>
            </div>
        `,
    };
    let Test = {
        // 新增append引數
        template: `
            <div>
                <h1>我是測試頁面</h1>
                <router-link to="childpages01" append>子頁面01</router-link>
                <router-link to="childpages02" append>子頁面02</router-link>
                <router-view></router-view>
            </div>
        `,
    };
    let ChildPages01 = {
        template: `
            <div>
                <h1>我是子頁面01</h1>
            </div>
        `,
    };
    let ChildPages02 = {
        template: `
            <div>
                <h1>我是子頁面02</h1>
            </div>
        `,
    };
    let App = {
        template: `
            <div>
                <router-link :to="{ name: 'home' }">首頁</router-link>
                <router-link :to="{ name: 'test' }">測試頁面</router-link>
                <router-view></router-view>
            </div>
        `,
    };
    // 例項化一個router物件(本質上是將路徑和頁面內容綁定了對應關係)
    let router = new VueRouter({
        routes: [
            {
                name: 'home',
                path: '/',
                component: Home,
            },
            {
                name: 'test',
                path: '/test',
                component: Test,
                // children實現子路由(子頁面)
                children: [
                    {
                        path: 'childpages01',
                        component: ChildPages01,
                    },
                    {
                        path: 'childpages02',
                        component: ChildPages02,
                    },
                ],
            },
        ],
    });
    new Vue({
        el: '#app',
        template: `<App/>`,
        // 在根例項中註冊router物件
        router: router,
        components: {
            App,
        },
    });
</script>
</body>

測試效果如下圖： 在這裡插入圖片描述 這裡只點擊了一次 子頁面01，顯示的內容是正常的，後面的路徑也是正常的.

下面的是點選了兩次： 在這裡插入圖片描述 可見，內容顯示不正常了，後面的路徑也不正常了——append引數會在後面一直新增子路徑中的路徑.

使用以上方式，路徑是寫死在屬性中的，所以子路徑會不斷的append到追後面，導致後續訪問不到響應的頁面，可以採用另一種方式——動態繫結屬性.

動態繫結屬性

動態繫結屬性即給子路由命名，使用子路由命的名稱來實現子路徑的正常切換.

<body>
<div id="app"></div>
<script>
    // 在Vue根例項中使用VueRouter
    Vue.use(VueRouter
            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
Vue路由系統詳述

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



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



  
 

    


    
    
Vue-router   VUE路由系統

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



  
 

    


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

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



  
 

    


    
    
Vue專題-路由系統

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



  
 

    


    
    
Vue.js之路由系統

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



  
 

    


    
    
Vue 路由許可權控制，只能從登陸頁面進入系統

     
 
                實現這種校驗分幾個步驟 
1.設定路由是否需要校驗的閾值 
在路由配置加上meta的判斷



  routes: [{
    path: '/',
    name: 'Login',
    component: () => import('@/pages/log 



  
 

    


    
    
Vue管理系統前端系列六動態路由-許可權管理實現

     
 [toc]

-----------------------

## 為什麼要使用動態路由？

一般系統中，都會有不同許可權的操作人員，這時候他們看到的頁面也將會不同，因此都需要根據他們的許可權來生成對應的選單，這個就得通過動態路由來實現。

## 主流的兩種實現方式

控制一般都是由前端的路由中設定。後端返 



  
 

    


    
    
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-路由-多層

     
 path   tail   view   -s   document   name   div   ctype   out   
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8"> 



  
 

    


    
    
Django 路由系統簡述

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



  
 

    


    
    
vue 路由

     
 path   export   pre   one   use   name   頁面   out   fault   1、在 src/router/index.js 裏定義新的路由數據

import Vue from ‘vue‘
import Router from ‘vue-router‘
import 



  
 

    


    
    
vue-路由

     
 meta   code   pan   ()   xtend   src   ews   htm   art   1

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



  
 

    


    
    
vue路由復習（轉載）

     
 log   home   scrip   自己的   isam   監聽   響應   函數式   comment   
 







回頭看 vue-router 復習



我的github iSAM2016


目錄

響應路由參數的變化
嵌套路由
函數式導航
路由的命名

示例:切換路由的時候可以 



  
 

    


    
    
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路由相關知識收集

     
 details   tail   blog   vue   htm   知識   article   detail   .net   http://blog.csdn.net/sinat_17775997/article/details/76474892
 
http://blog.csdn.net/k491