Vue-cli4路由配置的示例分析

這篇文章主要介紹Vue-cli4路由配置的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

前言-vue路由

Vue-router是Vue官方的路由插件,與Vue.js深度集成.
在使用了vue-router的單頁(yè)面應(yīng)用中,url的改變會(huì)引起組件的切換,從而達(dá)到頁(yè)面切換的效果,所以如何讓URL按照我們的意愿去改變和URL改變后頁(yè)面去向何處是配置vue-router的兩大問(wèn)題.

[SPA網(wǎng)頁(yè)]前端渲染使得單頁(yè)面富應(yīng)用的SPA頁(yè)面得以實(shí)現(xiàn),整個(gè)網(wǎng)頁(yè)只有一個(gè)HTML頁(yè)面,靜態(tài)資源服務(wù)器里只有一套HTML & CSS,甚至只有一套JS.

[富應(yīng)用] 得以實(shí)現(xiàn)依賴(lài)于發(fā)送至服務(wù)端的一個(gè)新的請(qǐng)求URL從服務(wù)器中獲取到資源后,前端路由會(huì)負(fù)責(zé)分配資源給頁(yè)面的相應(yīng)組件;

[單頁(yè)面] 的實(shí)現(xiàn)需要url在前端改變,前端路由出現(xiàn)后,前端路由會(huì)根據(jù)router的監(jiān)聽(tīng),從映射關(guān)系里找到需要改變的部分,抽取分配新的資源,并僅僅重新渲染需要改變的部分;

一、最基本路由配置

首先得安裝vue-router,怎么裝就不說(shuō)了…
在我們安裝vue-router成功后,項(xiàng)目文件的src內(nèi)會(huì)出現(xiàn)一個(gè)"router"文件夾,這個(gè)文件夾內(nèi)會(huì)有一個(gè)index.js,對(duì)router的配置就主要在這里完成了.

打開(kāi)它,然后在 routes 數(shù)組中進(jìn)行配置,一個(gè)頁(yè)面的路由在這個(gè)數(shù)組里被集合為一個(gè)對(duì)象,其內(nèi)部包括path和component等屬性,對(duì)應(yīng)著URL怎么樣改變會(huì)做出怎樣的反應(yīng);

1.配置router/index.js

//這是在router/index.js,全部;
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
   //在此處配置路由;
]
//在router4中使用createRouter替代了new VueRouter;
const router = createRouter({ 
  history: createWebHistory(process.env.BASE_URL),
  routes
  //在此處引入所有頁(yè)面的路由配置數(shù)組routes;
})

export default router   
//導(dǎo)出包含著所有路由配置的router對(duì)象,
//在main.js中注入后供全局使用;

component屬性:值為一個(gè)頁(yè)面,這個(gè)頁(yè)面控件需要提前引入.

path屬性:規(guī)定URL內(nèi)出現(xiàn)什么時(shí)跳轉(zhuǎn)到component屬性對(duì)應(yīng)的頁(yè)面.

//這是在router/index.js,末尾部分略去;
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import News from '../views/News.vue'
//引入3個(gè)頁(yè)面控件;
const routes = [
    {
        path: '/',  /* 規(guī)定初始URL對(duì)應(yīng)的頁(yè)面 */
        name: 'Home',
        component: Home   /* 規(guī)定默認(rèn)在Home頁(yè)面 */
   },
   {
        path: '/about',/* 規(guī)定URL新增段為/about時(shí)跳轉(zhuǎn) */
        name: 'About',
        component: About  /* 跳轉(zhuǎn)至About */
   },
   {
        path: '/news', /* 規(guī)定URL新增段為/news時(shí)跳轉(zhuǎn) */
        name: "News",
        component: News  /* 跳轉(zhuǎn)至News */
   },
]

2.配置App.vue

前面規(guī)定好了url改變?yōu)椴煌址麜r(shí)會(huì)怎樣進(jìn)行跳轉(zhuǎn),現(xiàn)在得想想怎么才能讓URL改變了,以我們的方式改變.
因?yàn)橹挥蠥pp.vue會(huì)被render渲染,大家一開(kāi)始看到的和僅僅能操作的都只有App.vue,所以我們對(duì)URL改變方式的規(guī)定只能在這里進(jìn)行.

認(rèn)識(shí)兩種新的標(biāo)簽,他們已經(jīng)在全局被注冊(cè)過(guò)了.

  <router-link to="要在URL上添加的字符">XXX</router-link>
  //<router-link>會(huì)被渲染成為<a>;
  <router-view />
  //這倆需要組合使用;

App.vue里所有的頁(yè)面跳轉(zhuǎn)都由< router-link>通過(guò)改變URL進(jìn)行驅(qū)動(dòng).

< router-view>是一個(gè)占位標(biāo)簽,它規(guī)定了router-link標(biāo)簽需要顯示在什么位置
,總之你刪了它,router-link就顯示不了了(那都不重要,我們先說(shuō)路由吧…).

<!-- 這是在App.vue中 -->
<template>
  <div id="nav">
  <!-- to屬性規(guī)定如何改變URL; -->
  <!-- Tag屬性規(guī)定router-link標(biāo)簽需要被渲染成什么HTML元素; -->
    <router-link to="/" Tag="a">Home頁(yè)面</router-link> |
    <router-link to="/about" Tag="a">About頁(yè)面</router-link> |
    <router-link to="/news" Tag="a">News頁(yè)面</router-link> |
    <router-link to="/login" Tag="a">Login</router-link>
  </div>
  <router-view />
</template>

然后你就可以npm run serve跑起你的項(xiàng)目來(lái)看看了;

可以看到依據(jù)Tag屬性的規(guī)定是多了4個(gè)a標(biāo)簽的,我們點(diǎn)進(jìn)去News看下,

URL依據(jù)router-link的to屬性的值改變了,頁(yè)面正確的跳轉(zhuǎn).
到此基本的路由配置就完成了.

二、路由懶加載技術(shù)

把不同的路由對(duì)應(yīng)的組件分離,僅當(dāng)某路由被觸發(fā)時(shí)才會(huì)加載對(duì)應(yīng)組件,會(huì)更加高效,并且第三方 & 底層支撐 & 公共App 除外, 其他的Vue頁(yè)面組件都在服務(wù)器,隨用隨請(qǐng)求,確保對(duì)頁(yè)面的影響最小.

其實(shí)就是改變一下router/index.js里對(duì)各個(gè)組件的引入方法啦…
通過(guò)箭頭函數(shù)的方法進(jìn)行.

const routes = [
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
    //直接在這里引入了About并且賦值給了component;
  },
  {
    path: '/news',
    name: "News",
    component: () => import("../views/News.vue")
        //直接在這里引入了About并且賦值給了component;
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue')
        //直接在這里引入了About并且賦值給了component;
  },
]

三、路由嵌套

我們的子頁(yè)面不能沒(méi)有鏈接吧? 用戶通過(guò)App.vue進(jìn)入了一個(gè)子頁(yè)面,還應(yīng)該有下屬的鏈接將他們引導(dǎo)到其他頁(yè)面,這需要路由嵌套技術(shù).

說(shuō)簡(jiǎn)單些,就是在父頁(yè)面的路由里規(guī)定子頁(yè)面的路由,比如在News.vue的路由里規(guī)定NewsChild-1.vue的路由.

//這是縮減過(guò)的router/index.js;
const routes = [
  {
    path: '/news',
    name: "News",
    component: () => import("../views/News.vue"),
    children: [
      {
        path: 'NewsChild-1', 
        //子路由不用在前面寫(xiě)"/"和上一層路徑,
        //但其實(shí)解析是是會(huì)加上的;
        //規(guī)定URL出現(xiàn)/News/NewsChild-1時(shí),
        //跳轉(zhuǎn)至component對(duì)應(yīng)的頁(yè)面;
        component: () => import("../views/NewsChild-1"),
      }
    ]
  },
]

這樣就規(guī)定了在News頁(yè)面出現(xiàn)URL改變后應(yīng)當(dāng)進(jìn)行的操作.
自然,我們還得規(guī)定News頁(yè)面下要怎樣改變URL,進(jìn)入News.vue進(jìn)行操作.

<!-- 這是News.vue; -->
<template>
  <h2>News</h2>
  //規(guī)定在被觸發(fā)時(shí)URL增加/News/NewsChild-1;
  <router-link to="/News/NewsChild-1">NewsChild-1</router-link>
  <router-view></router-view>
</template>

然后來(lái)看下渲染出的頁(yè)面吧:

點(diǎn)擊鏈接NewsChild-1:

URL變?yōu)?News/NewsChild-1,依據(jù)router-link的to屬性值.
大可再在children數(shù)組里多嵌套幾個(gè)頁(yè)面組件,如法炮制即可.

四、動(dòng)態(tài)路由

很多時(shí)候頁(yè)面需要跳轉(zhuǎn)到哪里是不能由我們寫(xiě)程序的來(lái)確定的,這就需要程序按照需求去自己決定,讓路由得以動(dòng)態(tài)改變.

1.動(dòng)態(tài)路由配置

說(shuō)簡(jiǎn)單些,我們不把[to需要增加的URL]和[path判定跳轉(zhuǎn)的URL]寫(xiě)死就好了,把URL里需要經(jīng)常變化的部分,利用v-bind與export default中的data數(shù)據(jù)互通起來(lái),讓URL跟隨數(shù)據(jù)變動(dòng).

//這是在router/index.js
import { createRouter, createWebHashHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
  },
  {
  //我們?cè)诖颂幰膊灰裵ath的值寫(xiě)死;
    path: '/user/:userId',
    name: 'User',
    component: () => import('../views/User.vue'),
  }
];

<!-- 這是在App.vue里 -->
<template>
  <div id="app">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <!-- 在此處使用v-bind將userId數(shù)據(jù)調(diào)用; -->
    <!-- 將/user/作為字符串拼接給userId -->
    <router-link v-bind:to="'/user/' + userId">用戶</router-link>
  </div>
  <router-view />
</template>
<script>
export default {
  name: "app",
  data() {
    return {
    //在此處設(shè)定userId的數(shù)據(jù)為baixia;
      userId: "baixia",
    };
  },
};
</script>

來(lái)看下效果:

接下來(lái)點(diǎn)擊用戶:

URL成功拼接了了data里的數(shù)據(jù)UserId,即baixia.

2.動(dòng)態(tài)路由傳參

動(dòng)態(tài)路由也是Vue傳遞數(shù)據(jù)的方式之一,利用$route來(lái)進(jìn)行Vue頁(yè)面組件(即vue文件)間的通信.
先來(lái)認(rèn)識(shí)兩個(gè)變量:
$router: index.js末尾利用createRouter創(chuàng)建的路由對(duì)象
$route: 當(dāng)前正處于活躍狀態(tài)下的路由對(duì)象,其中有一個(gè)params屬性,全稱(chēng)parameters,利用它,可以取到我們URL里使用v-bind傳的值.

比如User.vue需要獲取App.vue的data中的userId數(shù)據(jù):

<!-- 在App.vue中(發(fā)方) -->
<template>
  <div id="app">
    <router-link v-bind:to="'/user/' + userId">用戶</router-link>
  </div>
  <router-view />
</template>
<script>
export default {
  name: "app",
  data() {
    return {
      userId: "baixia",
    };
  },
};
</script>

//在user.vue中(收方)
export default {
    name:"user",
    computed: {
        userId() {
            return this.$router.params.userId
//將this.$router.param.userId的值,
//即App.vue的router-link里傳入的userId返回,
//以作為計(jì)算屬性u(píng)serID()的值
        }
    }
}

User.vue里為了獲取用戶信息而使用的params,其獲取哪個(gè)屬性依賴(lài)于index.js里的path,的如果path:'/user/:abc',那么User.vue的< script>里應(yīng)當(dāng)為:

export default {
    name:"user",
        computed: {
            userId() {
            //這里也應(yīng)為獲取abc屬性;
                return this.$router.params.abc
           }
        }
}

以上是“Vue-cli4路由配置的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！