您好,登錄后才能下訂單哦!
小編給大家分享一下怎么使用vue-router插件,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
1 安裝
首先,通過 npm 安裝 vue-router 插件:
npm install --save vue-router
安裝的插件版本是:vue-router@3.0.2
2 用法
2.1 新建 vue 組件
在 router 目錄中,新建 views 目錄,然后新建兩個(gè) vue 組件(一個(gè)頁面就對(duì)應(yīng)一個(gè)組件)。
index.vue:
<template> <div>首頁</div> </template> <script> export default { name: "index.vue" } </script> <style scoped> </style>
about.vue:
<template> <div>關(guān)于我們</div> </template> <script> export default { name: "about" } </script> <style scoped> </style>
2.2 修改 main.js
// 引入 Vue 框架 import Vue from 'vue' import VueRouter from 'vue-router'; //引入 hello.vue 組件 import Hello from './hello.vue' //加載 vue-router 插件 Vue.use(VueRouter); /*定義路由匹配表*/ const Routers = [{ path: '/index', component: (resolve) => require(['./router/views/index.vue'], resolve) }, { path: '/about', component: (resolve) => require(['./router/views/about.vue'], resolve) }] //路由配置 const RouterConfig = { //使用 HTML5 的 History 路由模式 mode: 'history', routes: Routers }; //路由實(shí)例 const router = new VueRouter(RouterConfig); new Vue({ el: '#app', router: router, render: h => h(Hello) })
步驟如下:
加載 vue-router 插件。
定義路由匹配表,每個(gè)路由映射到一個(gè)組件。
配置路由。
新建路由實(shí)例。
在 Vue 實(shí)例中引用路由實(shí)例。
Routers 中的每一項(xiàng),都有以下這些屬性:
屬性 | 說明 |
---|---|
path | 匹配路徑 |
component | 需要映射的組件 |
webpack 把每一個(gè)路由都打包成一個(gè) js 文件。只有在請(qǐng)求該頁面時(shí),才會(huì)加載這個(gè) js 文件,即按需加載。
如果需要一次性加載,那么可以這樣配置:
{ path: '/index', component: require('./router/views/index.vue') }
配置了異步路由之后,編譯出的頁面 js 被稱為 chunk,它們默認(rèn)的命名格式為 0.main.js、1.main.js 等等。
可以在 webpack.config.js 中配置這個(gè) chunk 的命名格式:
output: { ... //chunk 文件名 chunkFilename:'[name].chunk.js' }
刷新頁面之后,就會(huì)在調(diào)試模式看到 chunk 名稱已經(jīng)被改變咯:
在 RouterConfig 中,我們使用了 HTML5 的 History 路由模式,即通過 "/" 來設(shè)置路徑。如果不配置 mode,RouterConfig 默認(rèn)是使用 “#” (錨點(diǎn))來匹配路徑。
注意: 生產(chǎn)環(huán)境中,服務(wù)端必須將所有路由都指向同一個(gè) HTML,或設(shè)置 404 頁面為這個(gè) HTML 頁面,否則刷新頁面就會(huì)出現(xiàn) 404 錯(cuò)誤。
2.3 配置 chunk 樣式
使用了 chunk 之后,每個(gè) *.vue 文件中所定義的樣式,默認(rèn)通過 Javascript 來動(dòng)態(tài)創(chuàng)建 <style> 標(biāo)簽來寫入樣式。我們可以通過配置,把這些文件中的樣式都統(tǒng)一寫入 main.css,修改 webpack.config.js :
plugins: [//插件 new ExtractTextPlugin({ filename: '[name].css', allChunks: true }), ... ]
2.4 配置 History 路由指令
在 package.json 中,修改 dev 指令:
"dev": "webpack-dev-server --open --history-api-fallback --config webpack.config.js",
2.5 掛載路由組件
在根實(shí)例,掛載路由組件:
<template> <div> <router-view></router-view> </div> </template>
運(yùn)行時(shí),<router-view> 會(huì)根據(jù)當(dāng)前所配置的路由規(guī)則,渲染出不同的頁面組件。主界面中的公共部分,比如側(cè)邊欄、導(dǎo)航欄以及底部版權(quán)信息欄,可以直接定義在根目錄,與<router-view> 同級(jí)。這樣,當(dāng)切換路由時(shí),切換的只是<router-view> 掛載的組件,其它內(nèi)容不會(huì)變化。
2.6 運(yùn)行
執(zhí)行 npm run dev 之后,在瀏覽器地址欄輸入不同的 URL ,就會(huì)看到掛載的不同組件信息。
http://localhost:8080/index:
http://localhost:8080/about:
2.7 重定向
我們可以在路由配置表中,配置一項(xiàng)功能,當(dāng)訪問的頁面不存在時(shí),重定向到首頁:
const Routers = [ ... {//當(dāng)訪問的頁面不存在時(shí),重定向到首頁 path: '*', redirect: '/index' } ]
這樣,即使只訪問 http://localhost:8080/,也會(huì)自動(dòng)跳轉(zhuǎn)到首頁啦 O(∩_∩)O~
2.8 帶參數(shù)的路由
路由 path 可以帶參數(shù)。比如文章 URL,路由的前半部分是固定的,后半部分是動(dòng)態(tài)參數(shù),形如:/article/xxx。它們會(huì)被路由到同一個(gè)頁面,在該頁面可以獲取 xxx 參數(shù),然后根據(jù)這個(gè)參數(shù)來請(qǐng)求數(shù)據(jù)。
首先在 main.js 中配置帶參數(shù)的路由規(guī)則:
const Routers = [{ ... { path: '/article/:id', component: (resolve) => require(['./router/views/article.vue'], resolve) } ... ]
然后在 router/views 下新建一個(gè) article.vue :
<template> <div>{{$route.params.id}}</div> </template> <script> export default { name: "article", mounted() { console.log(this.$route.params.id); } } </script> <style scoped> </style>
運(yùn)行 npm run dev 后,在瀏覽器地址欄中輸入 http://localhost:8080/article/123,就能訪問到 article.vue 組件咯:
注意: 因?yàn)榕渲玫膮?shù)路由規(guī)則是 /article/:id,即必須帶 id 參數(shù),否則是會(huì)重定向 /index 的
看完了這篇文章,相信你對(duì)“怎么使用vue-router插件”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。