什么是Vue-Router路由

這篇文章給大家介紹什么是Vue-Router路由，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

普陀ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

Vue Router是Vue.js 官方的路由管理器。它和Vue.js的核心深度集成，可以非常方便的用于SPA應用程序的開發(fā)。

一.速識概念：

1. 后端路由：

1.根據(jù)不同的用戶URL請求,返回不同的內(nèi)容,本質(zhì)上是URL請求地址與服務器資源之間的對應關(guān)系。

2.但是呢，后端渲染存在性能問題。

2. 前端路由：

3.所以出現(xiàn)了Ajax前編渲染，前端渲染能提高性能，但是不支持瀏覽器的前進后退操作。

4.這時又出現(xiàn)了SPA(Single Page Application)單頁面應用程序，整個網(wǎng)站只有一個頁面，內(nèi)容的變化通過Ajax局部更新實現(xiàn)、同時支持瀏覽器地址欄的前進和后退操作。

5.SPA實現(xiàn)原理之一就是基于URL地址的 hash(hash的變化會導致瀏覽器記錄訪問歷史的變化、但是hash的變化不會觸發(fā)新的URL請求) 。在實現(xiàn)SPA過程中， 其中最核心的技術(shù)點就是前端路由。

6.前端路由就是根據(jù)不同的用戶事件，顯示不同的頁面內(nèi)容。本質(zhì)就是用戶事件與事件處理函數(shù)之間的對應關(guān)系。

3.Vue Router：

這是官方使用文檔鏈接。：https://router.vuejs.org/zh/guide/#javascript

Vue Router是Vue.js 官方的路由管理器。它和Vue.js的核心深度集成，可以非常方便的用于SPA應用程序的開發(fā)。

它的功能如下：

1.支持HTML5歷史模式或hash模式。

2.支持嵌套路由。

3.支持路由參數(shù)。

4.支持編程式路由。

5.支持命名路由。

二.基本使用:

前提：

下面將會以一個HTML單頁面演示Vue Router的基本使用步驟。在vue項目里也是一樣的原理。當前單頁面基本代碼：

可以看到什么都沒有：

下面開始使用的具體步驟：

1.引入相關(guān)的文件：

單頁面肯定得先導入vue文件與vue-router文件，這樣我們才能夠使用路由。

2.添加路由鏈接：

以下是一個vue提供的標簽，默認會被渲染為a標簽。其中有一個to屬性，這個to屬性會被渲染為href屬性，默認值被渲染為 # 開頭的hash地址。簡單來說就是當用戶點擊不同時跳轉(zhuǎn)不同內(nèi)容，而這個標簽就是用戶要點擊的東西，相當于a標簽嘛。

...

給我們的單頁面上加一個page1和一個page2的鏈接：

       Page1
       Page2
    

3.添加路由填充位：

下面這個標簽叫路由填充位，就是說未來通過我們的路由規(guī)則匹配到的組件，將會被渲染到 router-view所在位置。簡單來說，就是用戶點擊路由鏈接，那得跳轉(zhuǎn)內(nèi)容吧，我們知道的是肯定不是整個頁面都跳轉(zhuǎn)，只是頁面內(nèi)相關(guān)的局部發(fā)生內(nèi)容改變，這個局部就是router-view所在顯示的區(qū)域。

給我們的頁面添加：

        Page1
       Page2
       
    

4.定義路由組件：

既然要顯示不同的內(nèi)容，那肯定是用一個組件保存一份內(nèi)容。下面我們給單頁面定義page1，page2這兩個組件。

5.配置路由規(guī)則井創(chuàng)建路由實例：

routes是路由規(guī)則數(shù)組。每個路由規(guī)則都是一個配置對象， 其中至少包含path 和component 兩個屬性，path 表示當前路由規(guī)則匹配的hash 地址，component 表示當前路由規(guī)則對應要展示的組件。簡單來說就是你點擊那個鏈接對應的地址要對應的是哪個內(nèi)容的組件。path跟router-link標簽里的地址要一樣，別寫錯了。

const router = new VueRouter({
            routes: [
                {path:'/page1',component:Page1 },
                {path:'/page2',component:Page2 }
            ]
        })

6.把路由掛載到Vue根實例中：

為了能夠讓路由規(guī)則生效，必須把路由對象掛載到vue 實例對象上。

 const app = new Vue({
            el:"#app",
            data: {},
            router
        })

7.效果與單頁面代碼：

以上我們就大工告成~

上面的完整代碼：

    
    
    
    
    
    
    


    
       Page1
       Page2
       
    

    

三.路由重定向：

路由重定向指的是用戶在訪問地址A的時候,強制用戶跳轉(zhuǎn)到地址B，從而展示特定的組件頁面。

通過路由規(guī)則的redirect屬性,指定一個新的路由地址，可以很方便地設(shè)置路由的重定向。

{path:'/..',redirect: '/...'}

其中path表示重定向的原地址，redirect表示新地址。

比如第二大點的案例中，剛打開的頁面如下，在根目錄，但我們想一進入就顯示page1，那就給根目錄重定向。

修改路由規(guī)則如下：

const router = new VueRouter({
            routes: [             
                {path:'/page1',component:Page1 },
                {path:'/page2',component:Page2 },
                {path:'/',redirect:'/page1'}
            ]
        })

看效果，我沒點擊就默認進入page1了：

四.嵌套路由：

功能如下：

1. 點擊父級路由鏈接顯示模板內(nèi)容。

2. 模板內(nèi)容中又有子級路由鏈接。

3. 點擊子級路由鏈接顯示子級模板內(nèi)容。

比如我們改進第二大點的案例，當點擊page2顯示page2內(nèi)容時，page2里又有兩個子路由連接，star和moon，當點擊其中一個鏈接時又能顯示對應的star或moon內(nèi)容。

1.首先給page2組件添加兩個子路由鏈接：

const Page2 = {
            template: `
                 

                 
我是北極光之夜2號
                 

                 Star
                 Moon
                 

                 
`
        }

此時頁面也把顯示子路由鏈接出來了：

2.給兩個子路由鏈接添加路由填充位：

const Page2 = {
const Page2 = {
            template: `
                 

                 
我是北極光之夜2號
                 

                 Star
                 Moon
                 

                 
                 
`
        }

3.設(shè)置兩個子組件star與moon的內(nèi)容：

    const Star = {
            template: '
我是北極光之夜2號下的star
'
        }
        const Moon = {
            template: '
我是北極光之夜2號下的Moon
'
        }

4.配置路由規(guī)則：

page2的規(guī)則除了path和component屬性外，再添加一個children屬性，這個屬性以數(shù)組表示，數(shù)組里存放其子路由的規(guī)則，其規(guī)則也是一樣的，套娃套娃。

const router = new VueRouter({
            routes: [
                {path:'/page1',component:Page1 },
                {
                    path:'/page2',
                    component:Page2, 
                    children: [
                        {path: '/page2/star',component:Star},
                        {path: '/page2/moon',component:Moon}
                    ]
                }
            ]
        })

5.效果與單頁面代碼：

完整代碼：

    
    
    
    
    
    
    


    
       Page1
       Page2
       
    

    

五. 動態(tài)路由匹配：

1.動態(tài)匹配路由基本使用：

如果某些路由規(guī)則的一部分是一樣的，只有另一部分是動態(tài)變化的，那我們可以把這些動態(tài)變化的部分形成路由參數(shù)，這些參數(shù)就叫做動態(tài)路由匹配。簡單來說，你先看下面這些路由鏈接，它們都有/page/，就是后面不一樣：

 Page1
   Page2
   Page3

那該咋配置路由呢？這樣嗎：

const router = new VueRouter({
            routes: [
                {path:'/page/1',component:Page},
                {path:'/page/2',component:Page},
                {path:'/page/3',component:Page}
            ]
        })

這樣萬一有很多一個個寫豈不是太麻煩了，所以引入?yún)?shù)，在動態(tài)改變的部分定義為參數(shù)，參數(shù)前面有一個冒號,那上面可簡寫成如下，動態(tài)部分設(shè)為參數(shù) ：id。

const router = new VueRouter({
            routes: [
                {path:'/page/:id',component:Page },
            ]
        })

在組件可以通過以下語法獲取當前路由的參數(shù)：

$router.params.參數(shù)名稱

好，再次修改第二大點的案例完成動態(tài)路由匹配：

1.定義路由鏈接：

   Page1
   Page2
   Page3
   
   

2.動態(tài)配置路由，參數(shù)id：

const router = new VueRouter({
    routes: [
        {path:'/page/:id',component:Page1 },
    ]
})

3.設(shè)置組件內(nèi)容，并顯示當前路由的參數(shù)：

const Page1 = {
    template: '
我是北極光之夜1號,當前id為：{{$route.params.id}}
'
}

看效果：

2.路由組件傳參：

上面的$route與對應路由形成高度耦合，不夠靈活啊，所以可以使用props將組件和路由解耦。簡單來說，好像也沒什么說的，直接看下面實例就能理解了。

2.1 當props為布爾類型：

        const router = new VueRouter({
            routes: [
 // 設(shè)置props，如果props為true，router.params會被設(shè)置為組件屬性
                {path:'/page/:id',component:Page1,props: true },
            ]
        })  
              
        const Page1 = {
// 這時就通過props接收參數(shù)，快速簡潔的接收參數(shù)id和使用它
                    props: ['id'],
                    template: '
我是北極光之夜1號,當前id為：{{id}}
'
                }

能達到一樣的效果，且更靈活了，上面記得反過來，先定義組件才配置路由規(guī)則，只是為了直觀才這樣寫：

2.2 當props為對象類型：

            const Page1 = {
        // 這時就通過props接收參數(shù)，快速簡潔的接收參數(shù)對象 并顯示
                props: ['name','age'],
                template: `
我是北極光之夜1號,當前id為：{{id}}
                            

                           姓名為：{{name}} ，年齡為：{{age}} 
`
                }
             const router = new VueRouter({
                routes: [
            // props為一個參數(shù)對象，它會原樣設(shè)置為組件屬性，
            // 里面的自定義的參數(shù)都能傳過去，但是id傳不了了
                    {path:'/page/:id',component:Page1 , props: {name:'auroras',age: 18} }
                ]
             })

效果，對象props對象里的能獲取，id就不行了：

2.3 當props為函數(shù)類型：

這個就什么都能獲取。

    const Page1 = {
// 這時就通過props接收參數(shù)，快速簡潔的接收參數(shù)
        props: ['name','age','id'],
        template: `
我是北極光之夜1號,當前id為：{{id}}
                    

                   姓名為：{{name}} ，年齡為：{{age}} 
`
        }
     const router = new VueRouter({
        routes: [
    // props為函數(shù)，這個對象接收router對象為自己形參，
    // 里面的自定義的參數(shù)和id都能傳過去
            {path:'/page/:id',
            component:Page1 , 
            props: router => ({id: router.params.id,name:'auroras',age: 18}) }
        ]
     })

效果：

當前完整代碼：

    
    
    
    
    
    
    


    
        Page1
        Page2
        Page3
        
        
   
         

六.Vue-Router命名路由：

為更加方便的表示路由的路徑，可以給路由規(guī)則起一個別名， 即為“命名路由”。繼續(xù)改進上面的案例講解用法：

1.首先給路由規(guī)則加一個name屬性，這個就是別名：

 const router = new VueRouter({
    routes: [
        {
        name: 'user',
        path:'/page/:id',
        component:Page1 , 
        props: router => ({id: router.params.id,name:'auroras',age: 18}) }
    ]
 })

2.在路由鏈接中使用：

     
    Page1
    Page2
    Page3
    
    

我們把第一個路由鏈接改進，to前面加上冒號，其中name表示匹配的是哪個路由規(guī)則，params表示要傳遞的參數(shù)，看下面是一樣的效果：

七.編程式導航：

1. 聲明式導航：首先聲明式導航是指用戶通過點擊鏈接完成導航的方式，比如點擊a標簽或者路由鏈接這些完成的跳轉(zhuǎn)。

2. 編程式導航：編程式導航就是說跳轉(zhuǎn)是因為我點擊它，它不是鏈接，但是它在JavaScript里調(diào)用了某個API也實現(xiàn)了跳轉(zhuǎn)。

3. 常用的編程式導航API如下：

this.$router.push('要跳轉(zhuǎn)的hash地址')
this.$router.go(n)

push里直接放要跳轉(zhuǎn)的哈希地址，go方法實現(xiàn)前進和后退，n代表數(shù)組，若n為1代表在歷史記錄中前進一位，-1代表在歷史記錄中后退一位。

1. this.$router.push(’ ')：

重寫一個案例，有page1、page2、page3三個路由鏈接，而在page3里有一個按鈕，這個按鈕的作用是點擊后返回顯示page1的內(nèi)容。這個按鈕可不是聲明式導航里的鏈接，就是一個按鈕。

1.定義普通的路由鏈接：

    
    Page1
    Page2
    Page3
    
    

2.定義3個組件內(nèi)容，其中給page3組件里放一個按鈕，并綁定點擊事件，在事件里通過API導航到page1：

const Page1 = {
    template: `
我是北極光之夜1號
`
}
const Page2 = {
    template: `
我是北極光之夜2號
`
}
const Page3 = {
    template: `

            
我是北極光之夜3號
            返回page1
               
`,
    methods: {
        goPage1(){
            this.$router.push('/page/1')
        }
    },
    
}

3.路由規(guī)則：

const router = new VueRouter({
                routes: [
                    {path:'/page/1',component: Page1},
                    {path:'/page/2',component: Page2},
                    {path:'/page/3',component: Page3}
                ]
             })

4.看效果：

5.完整代碼：

    
    
    
    
    
    
    


    
        Page1
        Page2
        Page3
        
    
   
         

不止href路徑，還可以有以下操作：

//字符串形式（路徑的名稱）
router.push('/page1')

//對象的形式
router.push({path: '/page1'})

//也可以傳遞參數(shù)，命名的路由
router.push({name: '/page1',parmas:{id: 1}})

//帶查詢參數(shù)，變成  /page1?p=id 
//這個挺實用的，比如在某些音樂網(wǎng)頁，點擊歌單后要導航到另一個該歌單詳細界面，此時要帶id，詳細界面靠此id重新發(fā)送請求，請求詳細信息
router.push({parh: '/page1',query:{p: 'id' }})

2. this.$router.go(n)：

改進第1小點的案例，當我page3跳到page1時，page1里又有一個返回的按鈕。我們把n設(shè)置為-1，他就會在歷史記錄中后退一位，后退一位就是page3.
修改page1組件內(nèi)容：

  const Page1 = {
                template: `

                        
我是北極光之夜1號
                        返回
                           
`,
                  methods: {
                    goBack(){
                        this.$router.go(-1)
                    }
            }
        }

效果：

關(guān)于什么是Vue-Router路由就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

網(wǎng)頁標題：什么是Vue-Router路由
瀏覽地址：http://m.jiaotiyi.com/article/jhojis.html