Vue —— 精講 VueRouter(1)

最近被Boos調去給新人做培訓去了,目前把自己整理的一些東西分享出來,希望對大家有所幫助

demo源代碼地址:https://github.com/BM-laoli/BMlaoli-learn-VueRouter

本章節為VueRouter前端 路由的章節部分

大綱

一、基本概念

路由就是通過網絡把訊息從源地址傳輸到目的地的活動
需要一些映射表

  1. 做路由
  2. 做信息的轉發(核心就是:轉發)

後端路由還有前端路由,後端渲染和前端渲染

前端渲染(前後端分離API生態),後端渲染(view嵌套一起)

前端路由的核心概念
地址變化的時候改變url的時候,不進行整體頁面刷新

改變url但是不刷新頁面,的解決方式

我們有這樣的一個需求,改變url跳轉地址,我們獲取新的頁面,但是不希望頁面發生刷新

解決方案1:locaion.hash = ‘/’

這個是vueRouter的底層實現

監聽hash的變化,從而改變網頁數據的獲取機制,渲染對應的組件,

解決方案2:H5的histroray模式

  1. pushState
    history.pushState({},”,’home’),第三個參數就是url

這裏的push實際上就是一個棧結構(先進后出),

假設我們這裏需要回去,使用back()彈棧

history.pushState({},'','home'),
history.pushState({},'','about'),
history.pushState({},'','user'),

//執行這個之後就能進行back()出棧了
history.back(),
// 此時的url是 /about

  1. repalceState

這裡有一個方法和push方法很像,但是不會back()不能點擊後腿按鈕

history.repalceState({},'','user'),
  1. go

這裏的go是對棧的一個操作,
go(-1)彈出一個
go(-2)彈出二個

go(1)壓入一個
go(2)壓入二個

go(-1)

以上就是我們的基本的前端路由原理

二、v-router基本使用

前端三大框架都有自己的router,可以用來構建SPA應用

使用小提示,還是非常非常的簡單的:

  1. 如果你沒有安裝就需要 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的屬性

  1. tage
    to是一個屬性 ,默認是渲染成一個a鏈接,假設我現在需要默認渲染成一個buttmm怎麼辦呢?
    加一個tag就好了
    <router-link to='/home' tag='button'  >首頁</router-link>
  1. 更改模式replceStats 不允許瀏覽器回退
    replace加上去就好了
<router-link to='/about' tag='button' replace >關於</router-link>
  1. 我們可以利用一些默認的東西去非常方便的做到想要的效果
<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>

  1. 首先我們需要在路由裏面加:
    /router/index.js
   {
        path: "/user/:usermsg",
        component: User
    }
]
  1. 頁面傳遞數據
    /App.vue
router-link :to="'/user/'+username">用戶相關</router-link>
<!-- 路由出口,既:渲染的出口,這個就是一個佔位符號 -->
<router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      username: 'lisi'
    }
  },

  1. 頁面獲取數據

一定要注意了,一定是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

路由懶加載

  1. 概念的理解

目前呢,我們打包的情況是這樣的:我們所有的代碼都是集中放在了以一個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
  1. 如何使用

使用非常的簡單,主要有如下的三種方式去使用,但是我最喜歡的還是最後一種方式
/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去到另一個子組件

  1. 首先 我們需要有組件
    /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>
  1. 在路由裏面去配置
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
            },

        ]
    },
    {
  1. 打入口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,後面我們再做詳細的講解

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

網頁設計公司推薦不同的風格,搶佔消費者視覺第一線

※廣告預算用在刀口上,台北網頁設計公司幫您達到更多曝光效益

※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面

南投搬家公司費用需注意的眉眉角角,別等搬了再說!

※教你寫出一流的銷售文案?