您好,登錄后才能下訂單哦!
這篇文章主要介紹Vue-cli4路由配置的示例分析,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
Vue-router是Vue官方的路由插件,與Vue.js深度集成.
在使用了vue-router的單頁面應用中,url的改變會引起組件的切換,從而達到頁面切換的效果,所以如何讓URL按照我們的意愿去改變和URL改變后頁面去向何處是配置vue-router的兩大問題.
[SPA網頁]前端渲染使得單頁面富應用的SPA頁面得以實現,整個網頁只有一個HTML頁面,靜態資源服務器里只有一套HTML & CSS,甚至只有一套JS.
[富應用] 得以實現依賴于發送至服務端的一個新的請求URL從服務器中獲取到資源后,前端路由會負責分配資源給頁面的相應組件;
[單頁面] 的實現需要url在前端改變,前端路由出現后,前端路由會根據router的監聽,從映射關系里找到需要改變的部分,抽取分配新的資源,并僅僅重新渲染需要改變的部分;
首先得安裝vue-router,怎么裝就不說了…
在我們安裝vue-router成功后,項目文件的src內會出現一個"router"文件夾,這個文件夾內會有一個index.js,對router的配置就主要在這里完成了.
打開它,然后在 routes 數組中進行配置,一個頁面的路由在這個數組里被集合為一個對象,其內部包括path和component等屬性,對應著URL怎么樣改變會做出怎樣的反應;
//這是在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 //在此處引入所有頁面的路由配置數組routes; }) export default router //導出包含著所有路由配置的router對象, //在main.js中注入后供全局使用;
component屬性:值為一個頁面,這個頁面控件需要提前引入.
path屬性:規定URL內出現什么時跳轉到component屬性對應的頁面.
//這是在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個頁面控件; const routes = [ { path: '/', /* 規定初始URL對應的頁面 */ name: 'Home', component: Home /* 規定默認在Home頁面 */ }, { path: '/about',/* 規定URL新增段為/about時跳轉 */ name: 'About', component: About /* 跳轉至About */ }, { path: '/news', /* 規定URL新增段為/news時跳轉 */ name: "News", component: News /* 跳轉至News */ }, ]
前面規定好了url改變為不同字符時會怎樣進行跳轉,現在得想想怎么才能讓URL改變了,以我們的方式改變.
因為只有App.vue會被render渲染,大家一開始看到的和僅僅能操作的都只有App.vue,所以我們對URL改變方式的規定只能在這里進行.
認識兩種新的標簽,他們已經在全局被注冊過了.
<router-link to="要在URL上添加的字符">XXX</router-link> //<router-link>會被渲染成為<a>; <router-view /> //這倆需要組合使用;
App.vue里所有的頁面跳轉都由< router-link>通過改變URL進行驅動.
< router-view>是一個占位標簽,它規定了router-link標簽需要顯示在什么位置
,總之你刪了它,router-link就顯示不了了(那都不重要,我們先說路由吧…).
<!-- 這是在App.vue中 --> <template> <div id="nav"> <!-- to屬性規定如何改變URL; --> <!-- Tag屬性規定router-link標簽需要被渲染成什么HTML元素; --> <router-link to="/" Tag="a">Home頁面</router-link> | <router-link to="/about" Tag="a">About頁面</router-link> | <router-link to="/news" Tag="a">News頁面</router-link> | <router-link to="/login" Tag="a">Login</router-link> </div> <router-view /> </template>
然后你就可以npm run serve
跑起你的項目來看看了;
可以看到依據Tag屬性的規定是多了4個a標簽的,我們點進去News看下,
URL依據router-link的to屬性的值改變了,頁面正確的跳轉.
到此基本的路由配置就完成了.
把不同的路由對應的組件分離,僅當某路由被觸發時才會加載對應組件,會更加高效,并且第三方 & 底層支撐 & 公共App 除外, 其他的Vue頁面組件都在服務器,隨用隨請求,確保對頁面的影響最小.
其實就是改變一下router/index.js里對各個組件的引入方法啦…
通過箭頭函數的方法進行.
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; }, ]
我們的子頁面不能沒有鏈接吧? 用戶通過App.vue進入了一個子頁面,還應該有下屬的鏈接將他們引導到其他頁面,這需要路由嵌套技術.
說簡單些,就是在父頁面的路由里規定子頁面的路由,比如在News.vue的路由里規定NewsChild-1.vue的路由.
//這是縮減過的router/index.js; const routes = [ { path: '/news', name: "News", component: () => import("../views/News.vue"), children: [ { path: 'NewsChild-1', //子路由不用在前面寫"/"和上一層路徑, //但其實解析是是會加上的; //規定URL出現/News/NewsChild-1時, //跳轉至component對應的頁面; component: () => import("../views/NewsChild-1"), } ] }, ]
這樣就規定了在News頁面出現URL改變后應當進行的操作.
自然,我們還得規定News頁面下要怎樣改變URL,進入News.vue進行操作.
<!-- 這是News.vue; --> <template> <h2>News</h2> //規定在被觸發時URL增加/News/NewsChild-1; <router-link to="/News/NewsChild-1">NewsChild-1</router-link> <router-view></router-view> </template>
然后來看下渲染出的頁面吧:
點擊鏈接NewsChild-1:
URL變為/News/NewsChild-1,依據router-link的to屬性值.
大可再在children數組里多嵌套幾個頁面組件,如法炮制即可.
很多時候頁面需要跳轉到哪里是不能由我們寫程序的來確定的,這就需要程序按照需求去自己決定,讓路由得以動態改變.
說簡單些,我們不把[to需要增加的URL]和[path判定跳轉的URL]寫死就好了,把URL里需要經常變化的部分,利用v-bind與export default中的data數據互通起來,讓URL跟隨數據變動.
//這是在router/index.js import { createRouter, createWebHashHistory } from 'vue-router'; const routes = [ { path: '/', name: 'Home', component: () => import('../views/Home.vue'), }, { //我們在此處也不要把path的值寫死; 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數據調用; --> <!-- 將/user/作為字符串拼接給userId --> <router-link v-bind:to="'/user/' + userId">用戶</router-link> </div> <router-view /> </template> <script> export default { name: "app", data() { return { //在此處設定userId的數據為baixia; userId: "baixia", }; }, }; </script>
來看下效果:
接下來點擊用戶:
URL成功拼接了了data里的數據UserId,即baixia.
動態路由也是Vue傳遞數據的方式之一,利用$route來進行Vue頁面組件(即vue文件)間的通信.
先來認識兩個變量:
$router: index.js末尾利用createRouter創建的路由對象
$route: 當前正處于活躍狀態下的路由對象,其中有一個params屬性,全稱parameters,利用它,可以取到我們URL里使用v-bind傳的值.
比如User.vue需要獲取App.vue的data中的userId數據:
<!-- 在App.vue中(發方) --> <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返回, //以作為計算屬性userID()的值 } } }
User.vue里為了獲取用戶信息而使用的params,其獲取哪個屬性依賴于index.js里的path,的如果path:'/user/:abc',那么User.vue的< script>里應當為:
export default { name:"user", computed: { userId() { //這里也應為獲取abc屬性; return this.$router.params.abc } } }
以上是“Vue-cli4路由配置的示例分析”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。