最近被Boos調去給新人做培訓去了，目前把自己整理的一些東西分享出來，希望對大家有所幫助
demo源代碼地址：https://github.com/BM-laoli/BMlaoli-learn-VueRouter
本章節為VueRouter前端 路由的章節部分
大綱
一、基本概念
路由就是通過網絡把訊息從源地址傳輸到目的地的活動
需要一些映射表
- 做路由
- 做信息的轉發（核心就是：轉發）
後端路由還有前端路由，後端渲染和前端渲染
前端渲染（前後端分離API生態），後端渲染（view嵌套一起）
前端路由的核心概念
地址變化的時候改變url的時候，不進行整體頁面刷新
改變url但是不刷新頁面，的解決方式
我們有這樣的一個需求，改變url跳轉地址，我們獲取新的頁面，但是不希望頁面發生刷新
解決方案1：locaion.hash = ‘/’
這個是vueRouter的底層實現
監聽hash的變化，從而改變網頁數據的獲取機制，渲染對應的組件，
解決方案2：H5的histroray模式
- pushState
history.pushState({},”,’home’),第三個參數就是url
這裏的push實際上就是一個棧結構（先進后出），
假設我們這裏需要回去,使用back()彈棧
history.pushState({},'','home'),
history.pushState({},'','about'),
history.pushState({},'','user'),
//執行這個之後就能進行back()出棧了
history.back(),
// 此時的url是 /about
- repalceState
這裡有一個方法和push方法很像，但是不會back()不能點擊後腿按鈕
history.repalceState({},'','user'),
- go
這裏的go是對棧的一個操作，
go(-1)彈出一個
go(-2)彈出二個
go(1)壓入一個
go(2)壓入二個
go(-1)
以上就是我們的基本的前端路由原理
二、v-router基本使用
前端三大框架都有自己的router，可以用來構建SPA應用
使用小提示，還是非常非常的簡單的：
- 如果你沒有安裝就需要 npm install vue-router去安裝
-
- 導入路由對象，並且調用Vue.use(VueRouter)安裝這個路由插件
- 創建路由實例，傳入映射配置wxain
- 在vue實例中掛載創建好了的路由
1.導入路由對象，並且配置optionn給路由
/router/index.js
/**
* 配置路由相關的信息
*/
// 1. 導入
import Router from 'vue-router'
// 2.1 導入vue實例
import Vue from 'vue'
// 導入組件
import Home from '../components/Home.vue'
import About from '../components/About.vue'
// 2.2使用路由（插件），安裝插件，vue的插件，都是這樣安裝，Vue.use
Vue.use(Router)
// 3. 創建路路由對象，這個就是在Router裏面配置映射和對象等東西
// 4. 抽離配置項出來
const routes = []
const router = new Router({routes})
//4. 導出
export default router
2.配置路由映射
/router/index.js
const routes = [
{path:'/home',component:Home},
{path:'/about',component:About},
]
3.在實例中使用路由
/main.js
import Vue from 'vue'
import App from './App'
import router from './router'//注意啊模塊查找規則index.js
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,// 主要是在這裏掛載進去就好了
render: h => h(App)
})
4.小心，我們的路由入口還有連接link
/App.vue
<template>
<div id="app">
<!-- //這兩個是一個全局祖冊過着個組件，這個就是一個a標籤 -->
<router-link to='/home'>首頁</router-link>
<router-link to='/about'>關於</router-link>
<!-- 路由出口,既：渲染的出口，這個就是一個佔位符號 -->
<router-view></router-view>
</div>
</template>
以下是我們的兩個組件
/Home.vue
<template>
<div>
<h2>我是首頁</h2>
<p>我是首頁內容哈哈哈</p>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
/About.vue
<template>
<div>
<h2>我是關於頁面</h2>
<p>我是首關於內容哈哈哈</p>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
以上就是我們非常簡單的使用
三、其它的知識點補充
路由的默認值，並且修改成mode=>hisary模式
我們希望默認显示的就是一個首頁
解決方式，映射一個’/’，然後進行重定向
/index.js
{
path:'/',
redirect:'/home'
},
我們為什麼要去做這調整成一個history，因為我們希望去掉#這個標識
只需要在new 的時候指定一下就好了
/index,js
const router = new Router({
routes,
mode:"history"//就是這裏的這個更改路由方式
})
router-link的屬性
- tage
to是一個屬性 ，默認是渲染成一個a鏈接，假設我現在需要默認渲染成一個buttmm怎麼辦呢？
加一個tag就好了
<router-link to='/home' tag='button' >首頁</router-link>
- 更改模式replceStats 不允許瀏覽器回退
replace加上去就好了
<router-link to='/about' tag='button' replace >關於</router-link>
- 我們可以利用一些默認的東西去非常方便的做到想要的效果
<style>
.router-link-active{
color: blue;
}
</style>
替換值：我們希望不要怎麼長，我們希望.active就能改樣式怎麼搞?
加一個active-calss就好了，這個直接就是acitve做為類就好了
<router-link to='/home' tag='button' active-class >首頁</router-link>
<style>
.active{
bgc:red
}
</style>
代碼路由跳轉，意思就是重定向
注意啊！route != router
在我們學習路由的時候，this.$router是一個非常重要的對象
這個東西在開中經常的使用
// this.$router.push('重定向的值就好了')。
// this.$router.push('/home')
// 如果你不想有出現回退按鈕，這樣來做就好了
this.$router.replace('/home')
四、動態路由參數
這裏只是簡單的介紹了理由傳參的地址欄拼接模式，但是還有更多更奇奇怪怪的傳值方式，詳見官方Router文檔,
this.$router.parmas
// 這個parmas裏面就是我們的路由參數存放點
這裏我們有這樣的一個需求，我們希望點擊user頁面的時候可以，得到任意的路由參數
比如我們現在/user/zhnsang，的時候可以獲取zhangshang，/user/lishi的時候可以獲取lishi>
- 首先我們需要在路由裏面加:
/router/index.js
{
path: "/user/:usermsg",
component: User
}
]
- 頁面傳遞數據
/App.vue
router-link :to="'/user/'+username">用戶相關</router-link>
<!-- 路由出口,既：渲染的出口，這個就是一個佔位符號 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
username: 'lisi'
}
},
- 頁面獲取數據
一定要注意了，一定是rouer裏面定義的才能從另一路由拿出來
/User.vue
<template>
<div>
<h2>我是用戶相關專業</h2>
<p>我是用戶訊息相關頁面，嘿嘿嘿嘿嘿</p>
<h1>{{ $route.params.usermsg }}44</h1>
<hr>
<h2>{{username}}</h2>
</div>
</template>
<script>
export default {
computed: {
username() {
return this.$route.params.usermsg
}
},
}
</script>
<style scpoe>
</style>
五、細節詳解
注意啊！再說一遍route != router
注意啊，這裏的$route實際上是我們在main裏面new的一個Router得到的,
並且 這個route對象是隨着請求的地方不一樣，而改變的。也就是說，這個的route是當前頁面中的route對象，而且在vue只能只有一個route實例存在
六、 Vue的webpack打包詳解 + 路由懶加載
一個vue項目的簡單打包目錄結構分析
我們來看看,在一個vue項目中，簡單的三個文件是怎麼打包的
假設目前有這樣的三個文件 ，我們需要對他們進行打包，mian是入口，有一個add業務，有一個math依賴模塊。那麼我們webpack打包成的三個文件到底是如何運行的呢？
在vue中 使用webpack打包的時候，會把一些東西給分模塊的打包出來，它打包的東西的目錄結構如下
裏面我們實際打包的時候會把css，js都給分開，各自有各自的作用
| dist
| ---static
| ---css
| ---js
| -----app.XXXX.js (這個是項目的業務邏輯所在)
| -----manifest.xxxx.js (這個是底層打包的依賴文件所在)
| -----vendor.xxxx.js (這個是依賴所在)
| idnex.html
路由懶加載
- 概念的理解
目前呢，我們打包的情況是這樣的：我們所有的代碼都是集中放在了以一個app.xxx.js文件中，這樣其實不利於後期的維護和開發，因為如果我們有很多很多的大量的代碼的時候，我們的這個文件就會變得非常非常的大，於是呢，我們就需要路由懶加載，所謂懶加載就是：‘在需要的時候，才去加載某個資源文件’，路由懶加載，就是把每一個路由對應的業務邏輯代碼，在打包的時候分割到不同的js文件中，如何在需要用的時候再去請求它
經過這樣的打包的懶加載之後，我們的目錄會變成這個樣子
| dist
| ---static
| ---css
| ---js
| -----0.xxx.js (假設是路由home的業務邏輯代碼)
| -----1.xxx.js (假設是路由about的業務邏輯代碼)
| -----app.XXXX.js (這個是項目的業務邏輯所在)
| -----manifest.xxxx.js (這個是底層打包的依賴文件所在)
| -----vendor.xxxx.js (這個是依賴所在)
| idnex.html
- 如何使用
使用非常的簡單，主要有如下的三種方式去使用,但是我最喜歡的還是最後一種方式
/rouetr/index.js
- 使用vue的異步組價和webpack的寫法，早期的時候
const Home = resolve =>{ require.ensure(['../compenet/Home.vue'],()=>{
resolve (require('../compenet/Home.vue'))
})}
- AMD規範的寫法
const About = resolve =>{ require(['../compenent/About.vue'],resolve) }
- ES6的結合異步組件的方式（最常用）
const Home = () => import('../compenet/Home.vue')
實際的使用
/router/index.js
/**
* 配置路由相關的信息
*/
// 1. 導入
import Router from 'vue-router'
// 2.1 導入vue實例
import Vue from 'vue'
// 導入組件
// import Home from '../components/Home.vue'
// import About from '../components/About.vue'
// import User from '../components/User'
const Home = () =>
import ('../components/Home.vue')
const About = () =>
import ('../components/About.vue')
const User = () =>
import ('../components/User')
// 2.2使用路由（插件），安裝插件，vue的插件，都是這樣安裝，Vue.use
Vue.use(Router)
// 3. 創建路路由對象，這個就是在Router裏面配置映射和對象等東西
// 4. 抽離配置項出來
const routes = [{
path: '/',
redirect: '/home'
},
{
path: '/home',
component: Home
},
{
path: '/about',
component: About
},
{
path: "/user/:usermsg",
component: User
}
]
const router = new Router({
routes,
mode: "history"
})
//4. 導出
export default router
//6. 去main裏面掛載
七、 路由嵌套
我們目前有這樣的一個需求：我們希望我們在hone下，可以/home/new去到home下的一個子組件，/home/message去到另一個子組件
- 首先 我們需要有組件
/components/HomeMessage.vue
<template>
<div>
<ul>
<li1>我是消息1</li1>
<li2>我是消息2</li2>
<li3>我是消息3</li3>
<li4>我是消息4</li4>
</ul>
</div>
</template>
<script>
export default {
name:"HomeMessage"
}
</script>
<style>
</style>
/components/HomeNews
<template>
<div>
<ul>
<li1>新1</li1>
<li2>新2</li2>
<li3>新3</li3>
<li4>新4</li4>
<li5>新5</li5>
</ul>
</div>
</template>
<script>
export default {
name:"HomeNews"
}
</script>
<style>
</style>
- 在路由裏面去配置
const HomeNews = () =>
import ('../components/HomeNews')
const HomeMessage = () =>
import ('../components/HomeNews')
// 2.2使用路由（插件），安裝插件，vue的插件，都是這樣安裝，Vue.use
Vue.use(Router)
// 3. 創建路路由對象，這個就是在Router裏面配置映射和對象等東西
// 4. 抽離配置項出來
const routes = [{
path: '/',
redirect: '/home'
},
{
path: '/home',
component: Home,
children: [{
path: '',
redirect: 'news'
},
{
path: 'news',// 這裏寫路由實際上應該是/home/news,這裏只是一個相對路由地址，
component: HomeNews
},
{
path: 'message',
component: HomeMessage
},
]
},
{
- 打入口router-view（瞎起的名字實際上就是路由的佔位符）
/Home.vue
<template>
<div>
<h2>我是首頁</h2>
<p>我是首頁內容哈哈哈</p>
<router-link to="/home/news">news</router-link>
<router-link to="/home/message">message</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
這裏如果是有關狀態的保持，我們需要使用key-alive,後面我們再做詳細的講解
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】
※網頁設計公司推薦不同的風格，搶佔消費者視覺第一線
※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益
※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面
※南投搬家公司費用需注意的眉眉角角，別等搬了再說!
※教你寫出一流的銷售文案?
