當(dāng)前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

vue-router

發(fā)布時(shí)間：2023/12/15 综合教程 29 生活家

生活随笔收集整理的這篇文章主要介紹了 vue-router 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

官網(wǎng)：https://router.vuejs.org/zh-cn/

第1節(jié)：路由開始

　　安裝：npm install vue-router --save （使用vue-cli初始化項(xiàng)目時(shí)，若已安裝，不需重新安裝）

　　配置路由：

　　使用vue-cli初始化的項(xiàng)目中，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: [              //配置路由，這里是個(gè)數(shù)組
    {                    //每一個(gè)鏈接都是一個(gè)對(duì)象
      path: '/',         //鏈接路徑
      name: 'Hello',     //路由名稱，
      component: Hello   //對(duì)應(yīng)的組件模板
    }
  ]
})

　　router-link制作導(dǎo)航：

　　 <router-link to="/">[顯示字段]</router-link>

　　　　to：是我們的導(dǎo)航路徑，要填寫的是你在router/index.js文件里配置的path值，如果要導(dǎo)航到默認(rèn)首頁，只需要寫成 to=”/” ，

　[顯示字段] ：就是我們要顯示給用戶的導(dǎo)航名稱，比如首頁新聞頁。

　　
<router-view>渲染組件：

<!-- 路由匹配到的組件將渲染在這里 --> 
<router-view></router-view>

<template>
  <div id="app">
    <router-link to="/1">Hello</router-link>
    <router-link to="/2">World</router-link>
    <router-view/>
  </div>
</template>

第2節(jié)：配置子路由

　　子路由的寫法是在原有的路由配置下加入children字段。　　

import Vue from 'vue'   
import Router from 'vue-router'  
import Hello from '@/components/Hello'  
import Hi from '@/components/Hi' 
import Hi1 from '@/components/Hi1' 
import Hi2 from '@/components/Hi2' 
 
Vue.use(Router) 
 
export default new Router({
  routes: [             
    {                    
      path: '/',        
      name: 'Hello',     
      component: Hello   
    },{
      path:'/hi',
      component:Hi,
      children:[
        {path:'/',component:Hi},
        {path:'hi1',component:Hi1},
        {path:'hi2',component:Hi2},
      ]
    }
  ]
})

第3節(jié)：vue-router參數(shù)傳遞

　　參數(shù)的傳遞是個(gè)最基本的業(yè)務(wù)需求。通過URL地址來傳遞參數(shù)是一個(gè)形式。

　　一、用name傳遞參數(shù)

　　1、在路由文件src/router/index.js里配置name屬性。　　　

routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
 ]

　　2、模板里(src/App.vue)用$router.name的形勢接收，比如直接在模板中顯示：

<p>{{ $route.name}}</p>

　　二、通過<router-link> 標(biāo)簽中的to傳參

　　也許上邊的傳參很不正規(guī)，也不方便，其實(shí)我們多數(shù)傳參是不用name進(jìn)行傳參的，我們用<router-link>標(biāo)簽中的to屬性進(jìn)行傳參，需要您注意的是這里的to要進(jìn)行一個(gè)綁定，寫成:to。

　　<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>　　

name：就是我們?cè)诼酚膳渲梦募衅鸬膎ame值。
params：就是我們要傳的參數(shù)，它也是對(duì)象形勢，在對(duì)象里可以傳遞多個(gè)值。

　　在模板里用$route.params.username進(jìn)行接收。

第4節(jié)：vue-router 利用url傳遞參數(shù)

　　在實(shí)際開發(fā)也是有很多用URL傳值的需求，比如我們?cè)谛侣劻斜碇杏泻芏嘈侣剺?biāo)題整齊的排列，我們需要點(diǎn)擊每個(gè)新聞標(biāo)題打開不同的新聞內(nèi)容，這時(shí)在跳轉(zhuǎn)路由時(shí)跟上新聞編號(hào)就十分實(shí)用。

　　:冒號(hào)的形式傳遞參數(shù)

　　1、在配置文件里以冒號(hào)的形式設(shè)置參數(shù)。我們?cè)?src/router/index.js文件里配置路由。　　

{
    path:'/params/:newsId/:newsTitle',
     component:Params
}

　　我們需要傳遞參數(shù)是新聞ID（newsId）和新聞標(biāo)題（newsTitle）.所以我們?cè)诼酚膳渲梦募镏贫诉@兩個(gè)值。

　　2.在src/components目錄下建立我們params.vue組件，也可以說是頁面。我們?cè)陧撁胬镙敵隽藆rl傳遞的的新聞ID和新聞標(biāo)題。　　

<template>
    <div>
        <h2>{{ msg }}</h2>
        <p>新聞ID：{{ $route.params.newsId}}</p>
        <p>新聞標(biāo)題：{{ $route.params.newsTitle}}</p>
    </div>
</template>
 
<script>
export default {
  name: 'params',
  data () {
    return {
      msg: 'params page'
    }
  }
}
</script>

　　正則表達(dá)式在URL傳值中的應(yīng)用：

　　加入正則需要在路由配置文件里（/src/router/index.js）以圓括號(hào)的形式加入。

　　path:'/params/:newsId(\d+)/:newsTitle',

第5節(jié)：vue-router 的重定向-redirect

　　我們只要在路由配置文件中（/src/router/index.js）把原來的component換成redirect參數(shù)就可以了。

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

第6節(jié)：alias別名的使用

　　使用alias別名的形式，我們也可以實(shí)現(xiàn)類似重定向的效果。

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

<router-link to="/jspang">jspang</router-link>

　　redirect和alias的區(qū)別：　　

redirect：仔細(xì)觀察URL，redirect是直接改變了url的值，把url變成了真實(shí)的path路徑。
alias：URL路徑?jīng)]有別改變，這種情況更友好，讓用戶知道自己訪問的路徑，只是改變了<router-view>中的內(nèi)容。

　　　別名請(qǐng)不要用在path為’/’中，代碼的別名是不起作用的。

第7節(jié)：路由的過渡動(dòng)畫

　　<transition>標(biāo)簽

　　想讓路由有過渡動(dòng)畫，需要在<router-view>標(biāo)簽的外部添加<transition>標(biāo)簽，標(biāo)簽還需要一個(gè)name屬性。

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

　　css過渡類名：

fade-enter:進(jìn)入過渡的開始狀態(tài)，元素被插入時(shí)生效，只應(yīng)用一幀后立刻刪除。
fade-enter-active:進(jìn)入過渡的結(jié)束狀態(tài)，元素被插入時(shí)就生效，在過渡過程完成后移除。
fade-leave:離開過渡的開始狀態(tài)，元素被刪除時(shí)觸發(fā)，只應(yīng)用一幀后立刻刪除。
fade-leave-active:離開過渡的結(jié)束狀態(tài)，元素被刪除時(shí)生效，離開過渡完成后被刪除。

　　從上面四個(gè)類名可以看出，fade-enter-active和fade-leave-active在整個(gè)進(jìn)入或離開過程中都有效，所以CSS的transition屬性在這兩個(gè)類下進(jìn)行設(shè)置。

　　App.vue頁面里加入四種CSS樣式效果，并利用CSS3的transition屬性控制動(dòng)畫的具體效果

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

　　上邊的代碼設(shè)置了改變透明度的動(dòng)畫過渡效果，但是默認(rèn)的mode模式in-out模式，這并不是我們想要的。

　　過渡模式mode：　　

in-out:新元素先進(jìn)入過渡，完成之后當(dāng)前元素過渡離開。
out-in:當(dāng)前元素先進(jìn)行過渡離開，離開完成后新元素過渡進(jìn)入。

第8節(jié)：mode的設(shè)置和404頁面的處理

　　mode

hash: 使用 URL hash 值來作路由。支持所有瀏覽器，包括不支持 HTML5 History Api 的瀏覽器。

history: 依賴 HTML5 History API 和服務(wù)器配置

　　404頁面的處理

　　用戶會(huì)經(jīng)常輸錯(cuò)頁面，當(dāng)用戶輸錯(cuò)頁面時(shí)，我們希望給他一個(gè)友好的提示，為此美工都會(huì)設(shè)計(jì)一個(gè)漂亮的頁面，這個(gè)頁面就是我們常說的404頁面。vue-router也為我們提供了這樣的機(jī)制。

　　設(shè)置我們的路由配置文件（/src/router/index.js）：

{
   path:'*',
   component:Error
}

　　這里的path:’*’就是找不到頁面時(shí)的配置，component是我們新建的一個(gè)Error.vue的文件。

第9節(jié)：路由中的鉤子

　　路由的鉤子選項(xiàng)可以寫在路由配置文件中，也可以寫在我們的組件模板中。

　　路由配置文件中的鉤子函數(shù)

　　我們可以直接在路由配置文件（/src/router/index.js）中寫鉤子函數(shù)。但是在路由文件中我們只能寫一個(gè)beforeEnter,就是在進(jìn)入此路由配置時(shí)。

{
      path:'/params/:newsId(\d+)/:newsTitle',
      component:Params,
      beforeEnter:(to,from,next)=>{
        console.log('我進(jìn)入了params模板');
        console.log(to);
        console.log(from);
        next();
},

　　三個(gè)參數(shù)：

to:路由將要跳轉(zhuǎn)的路徑信息，信息是包含在對(duì)像里邊的。
from:路徑跳轉(zhuǎn)前的路徑信息，也是一個(gè)對(duì)象的形式。
next:路由的控制參數(shù)，常用的有next(true)和next(false)。

　　寫在模板中的鉤子函數(shù)

　　在配置文件中的鉤子函數(shù)，只有一個(gè)鉤子-beforeEnter，如果我們寫在模板中就可以有兩個(gè)鉤子函數(shù)可以使用：

beforeRouteEnter：在路由進(jìn)入前的鉤子函數(shù)。
beforeRouteLeave：在路由離開前的鉤子函數(shù)。

export default {
  name: 'params',
  data () {
    return {
      msg: 'params page'
    }
  },
  beforeRouteEnter:(to,from,next)=>{
    console.log("準(zhǔn)備進(jìn)入路由模板");
    next();
  },
  beforeRouteLeave: (to, from, next) => {
    console.log("準(zhǔn)備離開路由模板");
    next();
  }
}
</script>

第11節(jié)：編程式導(dǎo)航

　　之前導(dǎo)航都是用<router-link>標(biāo)簽或者直接操作地址欄的形式完成的，那如果在業(yè)務(wù)邏輯代碼中需要跳轉(zhuǎn)頁面我們?nèi)绾尾僮鳎窟@就需要編程式導(dǎo)航，顧名思義，就是在業(yè)務(wù)邏輯代碼中實(shí)現(xiàn)導(dǎo)航。

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

　　后退和前進(jìn)，功能跟我們?yōu)g覽器上的后退和前進(jìn)按鈕一樣，這在業(yè)務(wù)邏輯中經(jīng)常用到。

　　router.go(-1)代表著后退

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

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

　　這個(gè)編程式導(dǎo)航都作用就是跳轉(zhuǎn)，比如我們判斷用戶名和密碼正確時(shí)，需要跳轉(zhuǎn)到用戶中心頁面或者首頁，都用到這個(gè)編程的方法來操作路由。

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

總結(jié)

以上是生活随笔為你收集整理的vue-router的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

Vue
router

上一篇：贝叶斯决策与参数估计小结
下一篇： kali 安装 360国产浏览器