Vue實(shí)戰(zhàn)—路由輕松設(shè)置vue-router（3）

timger 發(fā)布于2019-08-23 18:08 / 2126人閱讀

摘要：決定將組建渲染在哪，打開，添加配置路由打開文件夾下引入各個組件配置路由路徑組件路由重定向我們在數(shù)組設(shè)定為。官方文檔注意，當(dāng)前激活導(dǎo)航設(shè)置方法固定屬性值。所以使用保留組件狀態(tài)，避免重新渲染購物車的數(shù)據(jù)丟失。

上篇我們說了vue項目的目錄設(shè)計，本篇我們來學(xué)習(xí)一下vue路由。

路由的作用：

在web端路由（route）就是URL到函數(shù)的映射，vue的router就像一個容器，分配，處理每一個route到URL中。

文檔地址：

vue路由官方文檔https://router.vuejs.org/zh/guide/#html

安裝：

通過node.js安裝；

npm install vue-router

但是一般情況下在node中安裝vue項目的時候根據(jù)提示選擇安裝vue-router；

如何使用路由：

舉個項目例子：

1.添加路由鏈接,打開Nav.vue

    點(diǎn)菜
    評價
    商家

to是路由指向的地址。

2.決定將組建渲染在哪，打開App.vue，添加：

3.配置路由,打開router文件夾下index.js

import Vue from "vue"
import Router from "vue-router"
//1.引入各個組件
import Goods from "@/components/Goods/Goods"
import Rates from "@/components/Rates/Rates"
import Seller from "@/components/Seller/Seller"

Vue.use(Router)
//2.配置路由   路徑->組件
export default new Router({
  routes: [
    {
      path: "/",
      redirect:"/goods"
    },
    {
      path: "/goods",
      component: Goods
    },
    {
      path: "/rates",
      component: Rates
    },
    {
      path: "/seller",
      component: Seller
    }
  ],
  linkActiveClass:"active"
})

redirect路由重定向：

我們在router數(shù)組設(shè)定redirect為“/goods”。那么只要路徑是/。頁面會跳轉(zhuǎn)到"/goods"頁面。

redirect官方文檔：

https://cn.vuejs.org/v2/guide...

注意，當(dāng)前激活導(dǎo)航設(shè)置方法：

linkActiveClass:"active"

linkActiveClass：固定屬性；

‘a(chǎn)ctive’：值。是我們定義的class類；

我們在點(diǎn)擊評價的時候，會得到上圖中的效果。

4.路由的keep-alive

針對于上圖中的業(yè)務(wù)情況:

我們在點(diǎn)菜頁面；

點(diǎn)了些食品；

那么現(xiàn)在購物車內(nèi)會有我們點(diǎn)過的數(shù)據(jù)；

點(diǎn)擊其他頁面，數(shù)據(jù)需要得到保留。
所以使用keep-alive保留組件狀態(tài)，避免重新渲染,購物車的數(shù)據(jù)丟失。

keep-alive官方文檔：https://cn.vuejs.org/v2/api/#...

總結(jié)

我們從安裝，到組件配置路由再到使用keep-alive的業(yè)務(wù)場景復(fù)現(xiàn)，讓我們對vue的router相關(guān)的技術(shù)點(diǎn)有了一定了解，我們將一步步完善項目，豐富我們的技術(shù)經(jīng)驗(yàn)。下篇我們通過axios為項目添加數(shù)據(jù)交互功能，敬請關(guān)注。