Vue 路由

時間  2020-04-03
標籤 vue 路由 欄目 系統網絡 简体版
原文   原文鏈接

 

在單頁應用中經常要用到路由。html

傳統的頁面跳轉是瀏覽器請求新的頁面，渲染整個新的頁面。vue

單頁應用是把要跳轉的頁面的以組件的形式集成在當前頁面中，跳轉時瀏覽器不用發起新請求，由於目標頁面是當前頁面的一部分，直接顯示目標頁面那一部分便可。vue-router

 

 

demo  在單頁應用中使用路由

一、下載路由插件npm

npm install vue-router -S

install能夠簡寫爲i數組

咱們要使用的是裏面的vue-router.js文件瀏覽器

 

 

二、寫一個test.html安全

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 引入vue.js -->
        <script src="js/vue.js"></script> 
        <!-- 引入路由插件。上線時均要換爲xxx.min.js -->
        <script src="js/vue-router.js"></script>
    </head>
    <body>
        
    <div id="app"></div>
    
    <script>
        // 首頁組件
        var Index={
            template:`
                <div>
                    <p>this is the index page</p>
                    <p><a href="#/login">login</a></p>  <!-- 注意url寫法，#/開頭 -->
                    <p><a href="#/register">register</a></p>
                </div>
            `
        }
        
        // 登陸組件
        var Login={
            template:`
                <div>
                    <p>this is the login page</p>
                    <p><a href="#/index">index</a></p>
                    <p><a href="#/register">register</a></p>
                </div>
            `
        }
        
        // 註冊組件
        var Register={
            template:`
                <div>
                    <p>this is the register page</p>
                    <p><a href="#/index">index</a></p>
                    <p><a href="#/register">register</a></p>
                </div>
            `
        }
            
        // 安裝路由插件
        Vue.use(VueRouter);
        
        // 建立路由對象
        var router=new VueRouter({
            // 配置路由規則
            routes:[  //對象數組
                {path:'/index',name:'index',component:Index}, //path指定映射地址，注意沒有#，component指定對應的組件
                {path:'/login',name:'login',component:Login},
                {path:'/register',name:'register',component:Register},
            ]
        });
        
        new Vue({
            el:'#app',
            router,  //本來是router:router,能夠簡寫
            template:`
                <div>
                    <!--路由頁面只是當前頁面的一部分，當前頁面能夠寫一些其餘內容，寫的內容是全部路由頁面-->
                    <p>this is common area</p>
                    <router-view></router-view>  <!--引入路由頁面。路由到哪一個頁面，就用對應的組件替換這部分-->
                </div>
            `
        })
    </script>        
        
    </body>
</html>

 

 

三、運行app

假設test.html的地址是：http://127.0.0.1:8848/vue/test.html#/      注意後面有個#函數

則index的地址是：http://127.0.0.1:8848/vue/test.html#/indexpost

login的地址是：http://127.0.0.1:8848/vue/test.html#/login

register的地址是：http://127.0.0.1:8848/vue/test.html#/register

 

3個頁面，但實際上路由的3個頁面都在test.html中。

 

 

 

 

單頁應用的兩種路由模式

  • 哈希模式（利用hashchange 事件監聽 url的hash 的改變）
  • history模式（須要後臺配合把接口都打到咱們打包後的.html文件上，好比上用test.html打包路由頁面，test.html至關於一個容器）

demo中使用的是哈希模式

 

 

 

哈希模式實現路由跳轉的原理

    // 監聽地址欄url的改變，haschange是預約義事件
    window.addEventListener("hashchange",function(e){  //haschange事件發生時，會封裝事件以參數的形式傳給處理函數
        console.log(e);  //這個對象的部分信息： {..., oldURL: "http://127.0.0.1:8848/vue/test.html#/index", newURL: "http://127.0.0.1:8848/vue/test.html#/register", type: "hashchange", …}
        console.log(location.hash); //地址欄的url已改變，獲取新的url的hash。帶有#/，好比#/index，#/login
        // console.log(location); //location是不帶#/的，好比index、login
        
        switch(location.hash){  //根據路由配置決定和哪些常量比較。這些常量就是路由配置中的path
            case '#/index':
                //...   //若是匹配就用對應的組件替換<router-view></router-view>部分
                break;
            case '#/login':
                break;
            case '#/register':
                break;
        }
    })

 

 

 

 

路由跳轉的3種方式

  • <a>連接
  • <router-link>標籤
  • $router對象
    new Vue({
        el:'#app',
        router,
        template:`
            <div>
                <p>
                    <a href="#/index">index</a>  <!-- 要帶# -->
                    <router-link to="/login">login</router-link>  <!-- 不帶# -->
                    <button @click="goRegister">register</button>
                </p>
                <router-view></router-view> 
            </div>
        `,
        methods:{ goRegister(){ this.$router.push({path:'/register'});  //不帶#
 } }
    })

 

<router-link>、$router都是路由插件裏的東西，都用路由了，那url中指定有#號，它本身會加#號，因此咱們寫路徑的時候不加#號。

<a>是html的標籤，不知道url中有沒有#號，因此須要咱們本身加上。

 

 

$router的經常使用方法

  • push()  跳轉到指定的頁面，會往history中插入一條新紀錄
  • replace()   和push()的用法、做用相同，只是replace()不會往history中插入一條新紀錄
  • go(-1)   跳轉到history中的上一條記錄，至關於點擊瀏覽器的後退箭頭。

 

$router還有個兄弟$route，和$router不一樣，$route封裝了路由信息，只有屬性（能夠理解爲是隻讀的），經常使用的屬性好比hash、path、query、params。

 

 

 

 

路由的傳參和取參

一、<a>連接方式

    // 首頁組件
    var Index={
        template:`
            <div>
                <p>this is the index page</p>
                <p>{{this.$route.query.username}}  {{this.$route.query.username}}</p>  <!-- 若是隻在載入此組件時使用，直接取就好了 -->
                <p>{{username}} {{password}}</p>  <!-- 若是後續還要使用，須要保存到內存變量中 -->
            </div>
        `,
        data(){
            return{
                username:'',
                password:''
            }
        },
        created(){ //路由到此組件|頁面時，會新建此組件的實例，在created()中獲取傳來的數據
            this.username=this.$route.query.username;  //$route,沒有r，a連接只能用query來取
            this.password=this.$route.query.password; }
    }
        
    // 安裝路由插件
    Vue.use(VueRouter);
    
    // 建立路由對象
    var router=new VueRouter({
        // 配置路由規則
        routes:[ 
            {path:'/index',name:'index',component:Index}, 
        ]
    });
    
    new Vue({
        el:'#app',
        router,
        template:`
            <div>
                <a href="#/index?username=chy&password=abcd">index</a>  <!-- 傳遞參數 -->
                <router-view></router-view> 
            </div>
        `
    })

參數以查詢字符串的形式拼接在url中：http://127.0.0.1:8848/vue/test.html#/index?username=chy&password=abcd

 

 

 

二、<router-link>方式有2種

（1）query

　　 <!-- to前面有冒號,我這裏使用的是路由配置裏的name。query -->
　　 <router-link :to="{name:'index',query:{username:'chy',password:'abcd'}}">index</router-link>

查詢字符串的形式拼接參數，獲取時也是$route.query的方式，url中會帶有參數：http://127.0.0.1:8848/vue/test.html#/index?username=chy&password=abcd

 

 

（2）params

<!--params，post方式-->
<router-link :to="{name:'index',params:{username:'chy',password:'abcd'}}">index</router-link>

要用$route.params來接收，用什麼傳遞就用什麼接收。

url中不顯示參數，更安全：http://127.0.0.1:8848/vue/test.html#/index

 

params方式的路由配置還能夠這樣寫：

    // 建立路由對象
    var router=new VueRouter({
        // 配置路由規則
        routes:[ 
            {path:'/index/:username',name:'index',component:Index},
        ]
    });

:參數名  能夠獲取對應的參數值，http://127.0.0.1:8848/vue/test.html#/index/chy，url是RESTful風格

 

 

 

三、$router對象方式

    new Vue({
        el:'#app',
        router,
        template:`
            <div>
                <button @click="goIndex">index</button>
                <router-view></router-view> 
            </div>
        `,
        methods:{ goIndex(){ this.$router.push({name:'index',query:{username:'chy',password:'abcd'}}); } }
    })

 

 

說明

<router-link>、$router對象方式，均可以使用query或params來傳遞參數，均可以使用path或name來指定路由頁面，

若是路由配置的path是：  {path:'/index/:username',name:'index',component:Index}   這種隨參數的變化而變化的，那就使用name。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程