Vue路由vue-router詳細講解指南

中文文檔:https://router.vuejs.org/zh/

Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成,讓構建單頁面應用變得易如反掌。路由實際上就是可以理解為指向,就是我在頁面上點擊一個按鈕需要跳轉到對應的頁面,這就是路由跳轉;

首先我們來學習三個單詞(route,routes,router):

  • route:首先它是個單數,譯為路由,即我們可以理解為單個路由或者某一個路由;
  • routes:它是個復數,表示多個的集合才能為復數;即我們可以理解為多個路由的集合,JS中表示多種不同狀態的集合的形式隻有數組和對象兩種,事實上官方定義routes是一個數組;所以我們記住瞭,routes表示多個數組的集合;
  • router:譯為路由器,上面都是路由,這個是路由器,我們可以理解為一個容器包含上述兩個或者說它是一個管理者,負責管理上述兩個;舉個常見的場景的例子:當用戶在頁面上點擊按鈕的時候,這個時候router就會去routes中去查找route,就是說路由器會去路由集合中找對應的路由;

我們結合一個小demo來看(文章有點長,耐心慢慢看,學得慢才能進步的快,當然可以跟著一起敲):

首先需要安裝vue-cli來構建一個vue的開發環境(怎麼安裝這裡不講,自己百度去,如果這種問題自己都解決不瞭的話,後面的知識可能對你來說收益不大)

安裝完vue-cli之後,我們的項目目錄結構如下:

然後我們在命令行中輸入npm install vue-router -g來安裝vue-router,安裝完之後我們可以打開package.json文件,在package.json文件中可以看到vue-router的版本號;

到這一步我們的準備工作就完成瞭,要進行寫demo瞭;

我們在src目錄下新建三個文件,分別為page1.vue和page2.vue以及router.js:

page1.vue:

<template>
    <div>
        <h1>page1</h1>
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "我是page1組件"
            }
        }
    }
</script>

page2.vue:

<template>
    <div>
        <h1>page2</h1>
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "我是page2組件"
            }
        }
    }
</script>

router.js

//引入vue
import Vue from 'vue';
//引入vue-router
import VueRouter from 'vue-router';
//第三方庫需要use一下才能用
Vue.use(VueRouter)
//引用page1頁面
import page1  from './page1.vue';
//引用page2頁面
import page2  from './page2.vue';

//定義routes路由的集合,數組類型
const routes=[
    //單個路由均為對象類型,path代表的是路徑,component代表組件
    {path:'/page1',component:page1},
    {path:"/page2",component:page2}
]

//實例化VueRouter並將routes添加進去
const router=new VueRouter({
//ES6簡寫,等於routes:routes
    routes
});

//拋出這個這個實例對象方便外部讀取以及訪問
export default router

這裡我們再修改一下main.js

import Vue from 'vue'
import App from './App'
//引用router.js
import router from './router.js'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
//一定要註入到vue的實例對象上
  router,
  components: { App },
  template: '<App/>'
})

修改App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
//router-link定義頁面中點擊觸發部分  
      <router-link to="/page1">Page1</router-link>
      <router-link to="/page2">Page2</router-link>
    </div>
//router-view定義頁面中顯示部分
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

就這樣,我們的頁面就可以進行路由跳轉和切換瞭,路由的基本使用就完成瞭;但是有個問題就是我們第一次進去是看不到路由頁面的,這是因為我們沒有設置默認值,我們首次進入的時候路徑是為空的,那麼我們可以這麼解決:

router.js

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
import page1  from './page1.vue';
import page2  from './page2.vue';
import user   from './user.vue'

const routes=[
    {path:'/page1',component:page1},
    {path:"/page2",component:page2},
    //可以配置重定向
    {path:'',redirect:"page1"}
    //或者重新寫個路徑為空的路由
    {path:"",component:page1}
]

const router=new VueRouter({
    routes
});

export default router

上面的兩種解決方案都是可以解決的,配置重定向的意思就是當匹配到路徑為空的時候,就會重定向到page1,執行page1的路由;或者我們也可以重新配置個路由,路徑為空的時候router-view展示page1的頁面;

用重定向和單獨配置路由的區別:

重定向實際上是當匹配到路徑符合條件的時候去執行對應的路由,當然這個時候的url上面的地址顯示的是對應的路由,頁面也是對應的路由頁面;

重新配置路由是當匹配到路徑符合條件的時候,router-view頁面展示部分負責拿符合條件路由的頁面來展示,實際上url是沒有發生變化的;

那麼還有些復雜情況,是基本路由實現不瞭的;我們來接著往下看

動態路由匹配:

其實我們的生活中有很多這樣的例子,不知道大傢留意沒有?比如一個網站或者後臺管理系統中,在我們登錄之後,是不是通常會有一個歡迎回來,XXX之類的提示語,這個我們就可以通過動態路由來實現這個效果;

首先在src目錄下新建一個user.vue文件:

<template>
    <div>
        <h1>user</h1>
       //這裡可以通過$route.params.name來獲取路由的參數
        <p>歡迎回來,{{$route.params.name}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "我是page1組件"
            }
        }
    }
</script>

然後我們修改App.vue文件的代碼:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
      <router-link to="/page1">Page1</router-link>
      <router-link to="/page2">Page2</router-link>
    </div>

//添加兩個router-link標簽
    <div>
      <router-link to="/user/xianyu">動態路由咸魚</router-link>
      <router-link to="/user/mengxiang">動態路由夢想</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

修改我們的router.js

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
import page1  from './page1.vue';
import page2  from './page2.vue';
import user   from './user.vue'

const routes=[
    {path:'/page1',component:page1},
    {path:"/page2",component:page2},
    // {path:'',redirect:"page1"}
    {path:"",component:page1},
 //使用冒號標記,當匹配到的時候,參數值會被設置到this.$route.params中
    {path:"/user/:name",component:user}
    
]

const router=new VueRouter({
    routes
});

export default router

配置好瞭,不出意外是能正常運行的,我們來看一下效果:

動態路由匹配給我們提供瞭方便,使得我們通過配置一個路由來實現頁面局部修改的效果,給用戶造成一種多個頁面的感覺,是不是很酷!!!

酷的同時也會給我們帶來一些問題,因為使用路由參數時,從/user/xianyu導航到/user/mengxiang,原來的組件實例會被復用,兩個路由都渲染同個組件,比起銷毀再創建,顯示復用顯得效率更高,帶來的的隻管問題就是生命周期鉤子函數不會再被調用,也就是不會再被觸發;但是辦法總比問題多,我們可以通過監聽$route對象來實現;

修改user.vue的代碼

<template>
    <div>
        <h1>user</h1>
        <p>歡迎回來,{{msg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                // msg: "我是page1組件"
                msg:""
            }
        },
        watch:{
//to表示即將要進入的那個組件,from表示從哪個組件過來的
            $route(to,from){
                this.msg=to.params.name; 
                console.log(111);
            }
        }
    }
</script>

效果圖如下:

我們可以很明顯的看到我們監聽的$route對象被觸發瞭,控制臺也輸出瞭;

下面我們來一起看一下嵌套路由:

嵌套路由:

很多時候我們的頁面結構決定瞭我們可能需要嵌套路由,比如當我們進入主頁之後有分類,然後當選擇其中一個分類之後進入對應的詳情,這個時候我們就可以用到嵌套路由;官方文檔中給我們提供瞭一個children屬性,這個屬性是一個數組類型,裡面實際放著一組路由;這個時候父子關系結構就出來瞭,所以children屬性裡面的是路由相對來說是children屬性外部路由的子路由;

好記性不如爛代碼,讓我們通過代碼來看一看:

首先在我們的src目錄下新建兩個vue文件,分別是phone.vue和computer.vue

phone.vue

<template>
    <div>
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "嵌套手機組件"
            }
        }
    }
</script>

computer.vue

<template>
    <div>
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "嵌套電腦組件"
            }
        }
    }
</script>

然後我們再修改我們的App.vue文件:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
      <router-link to="/page1">Page1</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

通過上面的App.vue文件我們可以看到,我們此時頁面隻有一個page1的標簽瞭;

我們再來修改router.js

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
import page1  from './page1.vue';
import page2  from './page2.vue';
import user   from './user.vue';
import phone  from './phone.vue';
import computer from './computer.vue'

const routes=[
    {
        path:'/page1',
        component:page1,
        children: [
            {
                path: "phone",
                component: phone
            },
            {
                path: "computer",
                component: computer
            },
        ]
    },
    // {path:"/page2",component:page2},
    // // {path:'',redirect:"page1"}
    // {path:"",component:page1},
    // {path:"/user/:name",component:user}
    
]

const router=new VueRouter({
    routes
});

export default router

為瞭大傢看的直觀點,其他路由全部註釋瞭,頁面隻剩下/page1這一個路由瞭;

上面說到瞭,children屬性其實就是一個子路由集合,數組結構裡面放著子路由;

效果圖如下:

路由導航兩種方式:

標簽導航:標簽導航<router-link><router-link>是通過轉義為<a></a>標簽進行跳轉,其中router-link標簽中的to屬性會被轉義為a標簽中的href屬性;

//跳轉到名為user路由,並傳遞參數userId
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

編程式導航:我們可以通過this.$router.push()這個方法來實現編程式導航,當然也可以實現參數傳遞,這種編程式導航一般是用於按鈕點擊之後跳轉

router.push({ name: 'user', params: { userId: 123 }})

這兩者都會把路由導航到user/123路徑

命名路由:

有的時候,通過一個名稱來標識一個路由顯得更方便一些,所以官方為瞭方便我們偷懶,又給我們在路由中添加瞭一個name屬性,命名這個屬性之後我們訪問這個屬性就等於直接訪問到路由;

普通路由:

router.push({ path: '/user/:userId', params: { userId: 123 }})

命名路由:

router.push({ name: 'user', params: { userId: 123 }})

其實兩者並沒有什麼區別,隻是提供瞭兩種方式來訪問路由,可以通過路徑來匹配也可以通過別名來匹配;

以上就是Vue路由vue-router詳細講解指南的詳細內容,更多關於Vue路由講解的資料請關註WalkonNet其它相關文章!

推薦閱讀: