<strike id="kwyau"></strike>

<del id="kwyau"></del>

<tfoot id="kwyau"></tfoot>

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

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

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

上篇我們說(shuō)了vue項(xiàng)目的目錄設(shè)計(jì)，本篇我們來(lái)學(xué)習(xí)一下vue路由。

路由的作用：

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

文檔地址：

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

安裝：

通過(guò)node.js安裝；

npm install vue-router

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

如何使用路由：

舉個(gè)項(xiàng)目例子：

1.添加路由鏈接,打開(kāi)Nav.vue

    點(diǎn)菜
    評(píng)價(jià)
    商家

to是路由指向的地址。

2.決定將組建渲染在哪，打開(kāi)App.vue，添加：

3.配置路由,打開(kāi)router文件夾下index.js

import Vue from "vue"
import Router from "vue-router"
//1.引入各個(gè)組件
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路由重定向：

我們?cè)趓outer數(shù)組設(shè)定redirect為“/goods”。那么只要路徑是/。頁(yè)面會(huì)跳轉(zhuǎn)到"/goods"頁(yè)面。

redirect官方文檔：

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

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

linkActiveClass:"active"

linkActiveClass：固定屬性；

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

我們?cè)邳c(diǎn)擊評(píng)價(jià)的時(shí)候，會(huì)得到上圖中的效果。

4.路由的keep-alive

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

我們?cè)邳c(diǎn)菜頁(yè)面；

點(diǎn)了些食品；

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

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

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

總結(jié)

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