vue路由vue-router

時間 2019-11-21

標籤 vue 路由 router 欄目系統網絡简体版

原文原文鏈接

以前咱們用vue提供的腳手架工具vue-cli搭建了一個helloworld，接下來咱們就在這個模板的基礎上學習vue-router

vue-router入門

由於在vue-cli中已經按照了vue-rotuer了，我不須要在安裝它

解讀`<router-link>`標籤

<router-link> 組件支持用戶在具備路由功能的應用中（點擊）導航。經過 to 屬性指定目標地址，默認渲染成帶有正確連接的 <a>標籤，能夠經過配置 tag 屬性生成別的標籤.。另外，當目標路由成功激活時，連接元素自動設置一個表示激活的 CSS 類名。

`<router-link>`的props

(官網的props)[https://router.vuejs.org/zh-cn/api/router-link.html]
說明:官網上有很詳細例子說明，我這裏就再也不介紹了

解讀router/index.js文件

咱們用vue-cli生產了咱們的項目結構，你能夠在src/router/index.js文件，這個文件就是路由的核心文件，咱們先解讀一下它:

import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Hello from '@/components/Hello'  //引入根目錄下的Hello.vue組件
Vue.use(Router)  //Vue全局使用Router
export default new Router({
  routes: [              //配置路由，這裏是個數組
    {                    //每個連接都是一個對象
      path: '/',         //連接路徑
      name: 'Hello',     //路由名稱，
      component: Hello//對應的組件模板
    }
  ]
})

還須要一步，就是將router掛載到main.js中的vue根實例上:

增長一個Hi的路由和頁面

對路由的核心文件熟悉後，咱們試着增長一個路由配置，咱們但願在地址欄輸入 http://localhost:8080/#/hi 的時候出現一個新的頁面
咱們看一下具體的操做步驟：
- 在src/components目錄下，新建 Hi.vue 文件。
- 編寫文件內容，和咱們以前講過的同樣，文件要包括三個部分<template>,<script>和<style>。文件很簡單，只是打印一句話。
```
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'hi',
data () {
return {
  msg: 'Hi, I am wzj'
}
}
}
</script>
<style scoped>
</style>
```
引入 Hi組件：咱們在router/index.js文件的上邊引入Hi組件
import Hi from '@/components/Hi'
增長路由配置：在router/index.js文件的routes[]數組中，新增長一個對象，代碼以下

{
  path:'/hi',
  name:'Hi',
  component:Hi
}

完整代碼:

import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Hello from '@/components/Hello'  //引入根目錄下的Hello.vue組件
import Hi from '@/components/Hi' 
Vue.use(Router)  //Vue全局使用Router
export default new Router({
  routes: [              //配置路由，這裏是個數組
    {                    //每個連接都是一個對象
      path: '/',         //連接路徑
      name: 'Hello',     //路由名稱，
      component: Hello   //對應的組件模板
    },{
      path:'/hi',
      name:'Hi',
      component:Hi
    }
  ]
})

`<router-link>`製做導航

如今經過在地址欄改變字符串地址，已經能夠實現頁面內容的變化了。這並不知足需求，咱們須要的是在頁面上有個像樣的導航連接，咱們只要點擊就能夠實現頁面內容的變化。製做連接須要標籤，咱們先來看一下它的語法。
<router-link to="/">[顯示字段]</router-link>
明白了<router-link>的基本語法，咱們在 src/App.vue文件中的template里加入下面代碼，實現導航。

<p>導航 ：
   <router-link to="/">首頁</router-link>
   <router-link to="/hi">Hi頁面</router-link>
</p>
<router-view></router-view>

說明<router-view>路由匹配到的組件將渲染在這裏
當咱們點擊hi頁面就能看到效果爲:

vue-router配置子路由

1、改造App.vue的導航代碼

咱們須要先改造app.vue的導航代碼，來實現基本的導航功能。咱們用<router-link>標籤增長了兩個新的導航連接。

<template>
  <div id="app">
      <p>導航 ：
         <router-link to="/helloWorld">首頁</router-link>|
         <router-link to="/hi">Hi頁面</router-link>|
         <router-link to="/hi/hi1">-Hi頁面1</router-link> |
         <router-link to="/hi/hi2">-Hi頁面2</router-link>
      </p>
      <router-view></router-view>
  </div>
</template>

2、改寫components/Hi.vue頁面

把Hi.vue改爲一個通用的模板，加入<router-view>標籤，給子模板提供插入位置。「Hi頁面1」和「Hi頁面2」都至關於「Hi頁面」的子頁面，有點想繼承關係。咱們在「Hi頁面」里加入標籤。

3、在components目錄下新建兩個組件模板 Hi1.vue 和 Hi2.vue

hi1.vue
hi2.vue

4、修改router/index.js代碼

咱們如今導航有了，母模板和子模板也有了，只要改變咱們的路由配置文件就能夠了。子路由的寫法是在原有的路由配置下加入children字段。形如:

children:[
{path:'/',component:xxx},
{path:'xx',component:xxx},
]

children字段後邊跟的是個數組，數組裏和其餘配置路由基本相同，須要配置path和component。具體看一下這個子路由的配置寫法。(子路由的配置)[https://router.vuejs.org/zh-cn/essentials/nested-routes.html]
完整代碼:

vue-router如何參數傳遞

開發中，參數的傳遞是個最基本的業務需求。經過URL地址來傳遞參數是一個形式，這節咱們就看看vue-router爲咱們提供了那些傳遞參數的功能

經過`<router-link>`標籤中的to傳參

咱們用<router-link>標籤中的to屬性進行傳參，須要您注意的是這裏的to要進行一個綁定，寫成:to。先來看一下這種傳參方法的基本語法：
<router-link :to="{path:xxx,query:{key:value}}">valueString</router-link>
這裏的to前邊是帶冒號的，而後後邊跟的是一個對象形勢的字符串.
- path：就是咱們在路由配置文件中起的path值。也能夠name
- query:是經過 url 來傳遞參數的一樣是key:value形式傳遞
瞭解基本的語法後，咱們改造一下咱們的src/App.vue裏的<router-link>標籤,咱們把hi1頁面的<router-link>進行修改。
<router-link :to="{path:'/hi/hi1',query:{username:'wzj'}}">Hi頁面1</router-link>
最後在模板裏(src/components/hi1.vue)用$route.query.username進行接收.
最終結果:
很明顯username這個參數傳過來了

vue-router 利用url傳遞參數

:冒號的形式傳遞參數

咱們能夠在理由配置文件裏以:冒號的形式傳遞參數，這就是對參數的綁定。
- 在配置文件裏以冒號的形式設置參數。咱們在/src/router/index.js文件裏配置路由。path:'/params/:newsId',component:params
- 咱們須要傳遞的是新聞ID
- 在src/components目錄下創建咱們params.vue組件，也能夠說是頁面。咱們在頁面裏輸出了url傳遞的的新聞ID
- 在App.vue文件里加入咱們的標籤。這時候咱們能夠直接利用url傳值了。 <router-link to="/params/198">params</router-link> |
最終效果:
newsId也傳過來了

正則表達式在URL傳值中的應用

上邊的例子，咱們傳遞了新聞編號，如今需求升級了，咱們但願咱們傳遞的新聞ID只能是數字的形式，這時候咱們就須要在傳遞時有個基本的類型判斷，vue是支持正則的。
加入正則須要在路由配置文件裏（/src/router/index.js）以圓括號的形式加入。path:'/params/:newsId(\\d+)/:newsTitle'
加入了正則，咱們再傳遞數字以外的其餘參數，params.vue組件就沒有辦法接收到。

vue-router 的重定向-redirect

有時候咱們雖然設置的路徑不一致，可是咱們但願跳轉到同一個頁面，或者說是打開同一個組件。這時候咱們就用到了路由的從新定向redirect參數

redirect基本重定向

咱們只要在路由配置文件中（/src/router/index.js）把原來的component換成redirect參數就能夠了。咱們來看一個簡單的配置。

export default new Router({
  routes: [
    {
      path: '/',
      component: Hello
    },{
      path:'/params/:newsId(\\d+)/:newsTitle',
      component:Params
    },{
      path:'/goback',
      redirect:'/'
    }
  ]
})

這裏咱們設置了goback路由，可是它並無配置任何component（組件），而是直接redirect到path:’/’下了，這就是一個簡單的從新定向。

子路由redirect重定向

子路由redirect重定向就不能將component換成redirect參數了，由於父組件裏也有內容，子組件只是一部分，看代碼:

{
            path: '/detail',
            component: DetailPage,
            redirect: '/detail/analysis',
            children: [
                {
                    path: 'analysis',
                    component: DetailAnaPage
                },
                {
                    path: 'count',
                    component: DetailCouPage
                },
                {
                    path: 'forecast',
                    component: DetailForPage
                },
                {
                    path: 'publish',
                    component: DetailPubPage
                }
            ]
        }

重定向時傳遞參數

咱們已經學會了經過url來傳遞參數，那咱們重定向時若是也須要傳遞參數怎麼辦？其實vue也已經爲咱們設置好了，咱們只須要在redirect後邊的參數裏複製重定向路徑的path參數就能夠了。可能你看的有點暈，咱們來看一段代碼：

{
  path:'/params/:newsId(\\d+)/:newsTitle',
  component:Params
},{
  path:'/goParams/:newsId(\\d+)/:newsTitle',
  redirect:'/params/:newsId(\\d+)/:newsTitle'
}

已經有了一個params路由配置，咱們在設置一個goParams的路由重定向，並傳遞了參數。這時候咱們的路由參數就能夠傳遞給params.vue組件了。參數接收方法和正常的路由接收方法同樣。

alias別名的使用

上節學習了路由的重定向，我相信你們已經能夠熟練使用redirect進行重定向了。使用alias別名的形式，咱們也能夠實現相似重定向的效果。
1.首先咱們在路由配置文件裏（/src/router/index.js），給上節課的hi1起一個別名，wzj。

{
    path: '/hi1',
    component: Hi1,
    alias:'/wzj'
 }

配置咱們的<router-link>，起過別名以後，能夠直接使用<router-link>標籤裏的to屬性，進行從新定向

<router-link to="/wzj">別名</router-link>

這樣也能跳到hi1頁面

路由的過渡動畫

路由運用過渡動畫可以給頁面增長一些動畫效果

`<transition>`標籤

想讓路由有過渡動畫，須要在標籤的外部添加標籤，標籤還須要一個name屬性。

<transition name="fade">
  <router-view ></router-view>
</transition>

咱們在/src/App.vue文件裏添加了標籤，並給標籤起了一個名字叫fade。

css過渡類名

組件過渡過程當中，會有四個CSS類名進行切換，這四個類名與transition的name屬性有關，好比name=」fade」,會有以下四個CSS類名：
- 1.fade-enter:進入過渡的開始狀態，元素被插入時生效，只應用一幀後馬上刪除。
- 2.fade-enter-active:進入過渡的結束狀態，元素被插入時就生效，在過渡過程完成後移除。
- 3.fade-leave:離開過渡的開始狀態，元素被刪除時觸發，只應用一幀後馬上刪除。
- 4.fade-leave-active:離開過渡的結束狀態，元素被刪除時生效，離開過渡完成後被刪除。
從上面四個類名能夠看出，fade-enter-active和fade-leave-active在整個進入或離開過程當中都有效，因此CSS的transition屬性在這兩個類下進行設置。
那咱們就在App.vue頁面里加入四種CSS樣式效果，並利用CSS3的transition屬性控制動畫的具體效果。代碼以下：

.fade-enter {
  opacity:0;
}
.fade-leave{
  opacity:1;
}
.fade-enter-active{
  transition:opacity .5s;
}
.fade-leave-active{
  opacity:0;
  transition:opacity .5s;
}

mode的設置和404頁面的處理

在路由的屬性中還有一個mode

mode的兩個值

histroy:當你使用 history 模式時，URL 就像正常的 url，例如 https://router.vuejs.org/zh-cn/essentials/redirect-and-alias.html
hash:默認’hash’值，可是hash看起來就像無心義的字符排列，不太好看也不符合咱們通常的網址瀏覽習慣。

404頁面的設置：

用戶會常常輸錯頁面，當用戶輸錯頁面時，咱們但願給他一個友好的提示，爲此美工都會設計一個漂亮的頁面，這個頁面就是咱們常說的404頁面。vue-router也爲咱們提供了這樣的機制.
1.設置咱們的路由配置文件（/src/router/index.js）：

{
   path:'*',
   component:Error
}

這裏的path:’*’就是找不到頁面時的配置，component是咱們新建的一個Error.vue的文件。
2.新建404頁面：
在/src/components/文件夾下新建一個Error.vue的文件。簡單輸入一些有關錯誤頁面的內容。

<template>
    <div>
        <h2>{{ msg }}</h2>
    </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'Error:404'
    }
  }
}
</script>

3.咱們在用<router-link>瞎寫一個標籤的路徑。

<router-link to="/bbbbbb">我是瞎寫的</router-link> |

預覽一下咱們如今的結果，就已經實現404頁面的效果。

編程式導航

前面的導航都是用<router-link>標籤或者直接操做地址欄的形式完成的，那若是在業務邏輯代碼中須要跳轉頁面咱們如何操做？這就是咱們要說的編程式導航，顧名思義，就是在業務邏輯代碼中實現導航。

this.$router.go(-1) 和 this.$router.go(1)

這兩個編程式導航的意思是後退和前進，功能跟咱們瀏覽器上的後退和前進按鈕同樣，這在業務邏輯中常常用到。好比條件不知足時，咱們須要後退。
router.go(-1)表明着後退，咱們可讓咱們的導航進行後退，而且咱們的地址欄也是有所變化的。
1.咱們先在app.vue文件里加入一個按鈕，按鈕並綁定一個goback( )方法。

<button @click="goback">後退</button>

2.在咱們的script模塊中寫入goback()方法，並使用this.$router.go(-1),進行後退操做。

<script>
export default {
  name: 'app',
  methods:{
    goback(){
      this.$router.go(-1);
    }
  }
}
</script>

打開瀏覽器進行預覽，這時咱們的後退按鈕就能夠向之前的網頁同樣後退了。
router.go(1):表明着前進，用法和後退同樣

this.$router.push(‘/xxx ‘)

這個編程式導航都做用就是跳轉，好比咱們判斷用戶名和密碼正確時，須要跳轉到用戶中心頁面或者首頁，都用到這個編程的方法來操做路由。
咱們設置一個按鈕，點擊按鈕後回到站點首頁。
1.先編寫一個按鈕，在按鈕上綁定goHome( )方法

<button @click="goHome">回到首頁</button>

2.在<script>模塊里加入goHome方法，並用this.$router.push(‘/’)導航到首頁

export default {
  name: 'app',
  methods:{
    goback(){
      this.$router.go(-1);
    },
    goHome(){
      this.$router.push('/');
    }
  }
}

相關標籤/搜索

vuerouter

路由

vue+vuerouter+vuex+axios

webpack+vue+vuerouter

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

vue路由vue-router

vue-router入門

解讀<router-link>標籤

<router-link>的props

解讀router/index.js文件

增長一個Hi的路由和頁面

<router-link>製做導航

vue-router配置子路由

1、改造App.vue的導航代碼

2、改寫components/Hi.vue頁面

3、在components目錄下新建兩個組件模板 Hi1.vue 和 Hi2.vue

4、修改router/index.js代碼

vue-router如何參數傳遞

經過<router-link>標籤中的to傳參

vue-router 利用url傳遞參數

:冒號的形式傳遞參數

正則表達式在URL傳值中的應用

vue-router 的重定向-redirect

redirect基本重定向

子路由redirect重定向

重定向時傳遞參數

alias別名的使用

路由的過渡動畫

<transition>標籤

css過渡類名

mode的設置和404頁面的處理

mode的兩個值

404頁面的設置：

編程式導航

this.$router.go(-1) 和 this.$router.go(1)

this.$router.push(‘/xxx ‘)

解讀`<router-link>`標籤

`<router-link>`的props

`<router-link>`製做導航

經過`<router-link>`標籤中的to傳參

`<transition>`標籤