vue-router筆記

什么是前端路由？

路由是根據(jù)不同的url地址展示不同的內(nèi)容或頁面

前端路由大致可分為4類

  1. 動態(tài)路由匹配
  2. 嵌套路由
  3. 編程式路由
  4. 命名路由和命名視圖

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

    如： /goods/:goodsId 動態(tài)路由，必須要輸入goods開始，后面加一個動態(tài)的數(shù)字或字符串

    // router/index.js文件
export default new Router({
  mode: 'history', /* 指定路由模式， history模式在url中是沒有#號的，只有hash模式才有 */
  routes: [
    {
      path: '/goods/:goodsId',   /* 動態(tài)路由模式 */
      name: 'Goods',
      component: Goods
    }
  ]
})

// 訪問時可以輸入  localhost:8080/goods/156

    <!-- GoodsList.vue文件 -->
<template>
  <div>
    <p>{{ lists }}</p>
    <p>{{ lists }}</p>
    <p>{{ lists }}</p>
    <p>id = {{ $route.params.goodsId }}</p>  <!--可以拿到動態(tài)的id-->
  </div>
</template>
<script>
export default {
  data () {
    return {
      lists: '我是商品列表'
    }
  }
}
</script>
<style></style>

    ?

  2. 嵌套路由

    嵌套路由就是在一個頁面中有多個路由鏈接，可以切換到不同的頁面或內(nèi)容而無需刷新(路由嵌路由).

    下面的案例中在商品列表中嵌套了兩個子路由

    1. 通過 http://localhost:8080/goods/image訪問圖片
    2. 通過 http://localhost:8080/goods/title訪問標(biāo)題
    <!-- GoodsList.vue -->
<template>
  <div>
    <p>{{ lists }}</p>
    <!-- to到達的地址一定要寫絕對地址,包括上一級goods地址 -->
    <router-link to="/goods/image">圖片</router-link>
    <router-link to="/goods/title">標(biāo)題</router-link>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      lists: '商品列表'
    }
  }
}
</script>
<style></style>

    <!-- Image.vue -->
<template>
  <div>
    <p>{{ img }}</p>
  </div>
</template>
<script>
export default {
  data () {
    return {
      img: '我是商品圖片'
    }
  }
}
</script>
<style></style>

    <!-- Title.vue -->
<template>
  <div>
    <p>{{ title }}</p>
  </div>
</template>
<script>
export default {
  data () {
    return {
      title: '我是標(biāo)題標(biāo)題'
    }
  }
}
</script>
<style></style>

    <!-- /router/index.js文件 -->
import Vue from 'vue'
import Router from 'vue-router'
import Goods from '@/views/GoodsList'
import Img from '@/views/Image'
import Tit from '@/views/Title'

// 如果在一個模塊化工程中使用vue-router，必須要通過 Vue.use() 明確地安裝路由功能
Vue.use(Router)

export default new Router({
  mode: 'hash',  /*有#號， 默認就是這種方式*/
  routes: [
    {
      path: '/goods',
      name: 'Goods',
      component: Goods,
      
      /**
      *  1.使用children屬性指定子路由
      *  2.在children里面的path中不能出現(xiàn)絕對路徑符合/
      *  3.{ path: '/title', component: Tit }中 path 的值多了斜杠，是錯誤的寫法
      */
      children: [
        { path: 'image', name: Img, component: Img },
        { path: 'title', component: Tit }
      ]
    }
  ]
})

    ?

  3. 編程式路由

    通過js來實現(xiàn)頁面的跳轉(zhuǎn)，目前有3種方法可以實現(xiàn)跳轉(zhuǎn)

    $router.push.('name');
$router.push.({path:'name'});
$router.push.({path:'name?id=123'})或$router.push.({path:'name', query:{a:123}});

    ?

  4. 命名路由和命名視圖

    給路由定義不同的名字，根據(jù)名字進行匹配

    給不同的router-view定義名字，通過名字進行對應(yīng)組件的渲染

     <!-- App.vue -->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- 這個 router-view 是裝載一級路由的 -->
    <!-- 該方式很少使用，相當(dāng)于將該組件劃分為三部分，其實可以在GoodsList中通過樣式劃分區(qū)域 -->
    <router-view></router-view>
    <router-view name="tit"></router-view>
    <router-view name="img"></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/index.js文件 -->
import Vue from 'vue'
import Router from 'vue-router'
import Goods from '@/views/GoodsList'
import Img from '@/views/Image'
import Tit from '@/views/Title'

// 如果在一個模塊化工程中使用vue-router，必須要通過 Vue.use() 明確地安裝路由功能
Vue.use(Router)

export default new Router({
  mode: 'hash',  /*有#號， 默認就是這種方式*/
  routes: [
    {
      path: '/',
      name: 'GoodsList',
      components: {
        default: GoodsList,
        tit: Tit,
        img: Img
      }
    }
  ]
})

什么是后臺路由？

瀏覽器在地址欄中切換不同的url時，每次都向后臺服務(wù)器發(fā)出請求，服務(wù)器響應(yīng)請求，在后臺拼接html文件傳給前端顯示, 返回不同的頁面,意味著瀏覽器會刷新頁面，網(wǎng)速慢的話說不定屏幕全白再有新內(nèi)容。后端路由的另外一個極大的問題就是 前后端不分離。

路由的模式

路由的模式有兩種

  • mode: 'history'
  • mode: 'hash' 會有一個#號出現(xiàn)在url中
// router/index.js文件中指定路由模式

import Vue from 'vue'
import Router from 'vue-router'
import List from '@/components/List'     /*@指的是src根目錄*/

// 如果在一個模塊化工程中使用vue-router，必須要通過 Vue.use() 明確地安裝路由功能
Vue.use(Router)

export default new Router({
  mode: 'hash',    /* 指定路由模式 */
  routes: [
    {
      path: '/',
      name: 'lists',
      component: List
    }
  ]
})

history

js中有一個全局的對象history 記錄著用戶的操作歷史，history.length 記錄著已經(jīng)操作了多少步

其實vue-router就是對history的一個封裝

  1. 當(dāng)前頁面刷新 history.go(0)
  2. 前進一頁 history.go(1)
  3. 后退一頁 history.go(-1)
  4. 當(dāng)前頁面刷新 history.back(0)
  5. 后臺一頁 history.back(1)
  6. 改變頁面 history.pushState(描述，標(biāo)題，地址)

注意點1：在template中的錯誤

在任何的 .vue 文件，template模板中只能有一個根元素，如果出現(xiàn)兩個或兩個以上的根元素都會出現(xiàn)語法錯誤

  • 錯誤的寫法

    <template>
  <!-- 出現(xiàn)兩個根元素會有語法錯誤 -->
  <p>使用雙大括號渲染內(nèi)容：{{message}} </p>
  <p>使用v-html指令渲染內(nèi)容：<span v-html="message"></span></p>
</template>
<script>
  export default {
    data () {
      return {
        message: '<span style="color: green">我是span里面的內(nèi)容</span>'
      }
    }
  }
</script>
<style>
</style>

    ?

  • 正確的寫法

    <template>
  <div id='test'>
    <p>使用雙大括號渲染內(nèi)容：{{message}} </p>
    <p>使用v-html指令渲染內(nèi)容：<span v-html="message"></span></p>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        message: '<span style="color: green">我是span里面的內(nèi)容</span>'
      }
    }
  }
</script>
<style>
</style>

    ?

注意點2：引入組件/注冊組件/使用組件

<!-- App.vue是應(yīng)用程序頁面入口 -->
<template>
  <div id="app">
    <router-view/>
    <!-- 3.使用組件 --> 
    <Counter></Counter>
  </div>
</template>

<script>
// 1.引入Counter.vue組件
import Counter from './components/Counter.vue';
export default {
  name: 'App',
  components: {
      // 2.注冊組件
      Counter
  }
}
</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: 20px;
  }
</style>

注意點3：路由中的傳參區(qū)別

要注意一個問題。router跟route有所不同。router是路由對象，所有在js中使用的路由對象

route是單個路由對象。

  1. 動態(tài)路由的傳參：通過 $route.params.goodrId 屬性拿到值

    routes: [
    {
      path: '/goods/:goodsId',   /*動態(tài)路由可以通過$route.params.goodrId拿到goodsId的值*/
      name: 'Goods',
      component: Goods
    }
 ]

    ?

  2. 通過問號傳參:

    // 在methods里面調(diào)用某個方法，方法里面調(diào)用頁面跳轉(zhuǎn)
this.$router.push({path:'/car?goodrId=123'});

// 使用 $route.query.goodsId可以拿到goodsId的值

    ?

vue注意事項

  1. Vue 不支持 IE8 及以下版本，因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的瀏覽器
  2. 在引入vue時必須要在head標(biāo)簽里面引入，不能在body標(biāo)簽結(jié)束前引入，這樣可以避免出現(xiàn)抖屏的現(xiàn)象。
  3. 使用 npm run build 命令可以生成成產(chǎn)環(huán)境的代碼，即瀏覽器支持的代碼，會在根目錄中生成一個dist 文件夾，里面就是生成環(huán)境所使用的代碼。

vue-router注意事項

在瀏覽器的地址欄中可以看到url有#號是怎么回事？

原因是在路由設(shè)置時有兩種表示方式：第一種是history，第二種是hash。如果是使用hash表示法就會在url中顯示#號。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容