【面試須要-Vue全家桶】一文帶你看透Vue前端路由

時間  2020-01-13
標籤 面試須要-Vue全家桶 一文 看透 vue 前端 路由 欄目 系統網絡 简体版
原文   原文鏈接

​

​

做者 |  Jesksonjavascript

掘金 |  https://juejin.im/user/5a16e1...css

2020.1.11前端

背景介紹vue

vue router是vue.js官方的路由管理器，它和vue.js的核心深度集成，讓構建單頁面應用變得易如反掌，它的功能有：java

嵌套的路由，或者是，視圖表；模塊化的，基於組件的路由配置；路由參數，查詢，通配符，基於Vue.js過渡系統的視圖過渡效果，細粒度的導航控制；帶有自動激活的CSS class的連接，HTML5歷史模式或者是hash模式，在IE9中自動降級；自定義的滾動條行爲。nginx

面試官提問，你能說出路由的概念嗎？能說明一下vue-router的基本使用步驟嗎？或者讓你說出vue-router的嵌套路由用法怎麼用？面試

再次詢問你vue-router如何實現動態路由匹配用法呢？請說出vue-router命名路由用法？請說出vue-router編程式導航用法？ajax

在實際業務中，去實現基於路由的方式。vue-router

快速入門sql

如何快速入門並掌握呢？瞭解路由的屬性配置說明，如何頁面跳轉，如何子路由-路由嵌套，路由的傳遞參數，命名路由，命名視圖，重定向，別名，過渡動畫，mode與404，路由的鉤子，路由的懶加載。

快速入門第一步安裝，vue-router是一個插件包，須要用npm來安裝。

npm install vue-router --save

vue-cli構建項目。router/index.js中。

// 引入vue
import Vue from 'vue'
// 引入vue-router路由依賴
import Router from 'vue-router'
// 引入頁面組件，命名爲HelloWorld
import HelloWorld from '@/components/HelloWorld'


// Vue全局使用Router
Vue.use(Router)


// 定義路由配置
export default new Router({
  routes: [                //配置路由
    {                        
      path: '/',            //連接路徑
      name: 'HelloWorld',        //路由名稱
      component: HelloWorld     //對應組件模板
    }
  ]
})

使用：main.js中

// 引入vue
import Vue from 'vue'
// 引入根組件
import App from './App'
// 引入路由配置
import router from './router'


// 關閉生產模式下給出的提示
Vue.config.productionTip = false


// 定義實例
new Vue({
  el: '#app',
  router, // 注入框架中
  components: { App },
  template: '<App/>'
})

頁面跳轉：

<router-link to="/">[顯示字段]</router-link>


<router-link to="/hello">hello</router-link>


this.$router.push('/xxx')


<button @click="goHome">回到首頁</button>


export default {
    name: 'app',
    methods: {
        goHome(){
            this.$router.push('/home');
        }
    }
}


//  後退一步
this.$router.go(-1)
// 前進一步
this.$router.go(1)

目錄

那麼這篇是根據面試官會問的進行解答，請看下方目錄：

​

在開發中，路由分後端路由和前端路由，後端路由是根據不一樣的用戶的url請求，返回不一樣的內容，本質是url請求地址與服務器資源之間的對應關係。

後端路由

過程，瀏覽器請求url地址到後端服務器，請求url地址被後端路由攔截，服務器中有服務器資源內容，是url地址所要請求的資源內容，請求到服務器資源內容被後端路由攔截傳遞給瀏覽器。

SPA，後端渲染是由性能問題的，用戶與服務器有常常提交多，後端路由就會致使網頁的頻繁刷新，致使性能問題，就有了ajax前端渲染，SPA是單頁面應用程序，整個網站只有一個頁面，內容變化是經過ajax局部更新實現，同時支持瀏覽器地址的前進和後退操做，spa的實現原理之一是基於url地址上的hash。

注意，hash的變化會致使瀏覽器記錄訪問歷史的變化，可是hash的變化不會觸發新的url請求，在實現spa過程當中，最核心的技術就是前端路由。

前端路由

前端路由是根據不一樣的用戶事件，顯示不一樣的頁面內容，本質是用戶事件和事件處理函數之間的對應關係，用戶觸發事件，響應瀏覽器，瀏覽器中含有前端路由，事件處理函數，用戶觸發事件給到前端路由，響應事件處理函數，事件函數渲染相應內容給用戶。

實現簡單的前端路由是基於url中的hash實現的，點擊菜單時改變url的hash值，根據hash的變化控制組件的切換。

監聽window的onhashchange事件，根據獲取到的最新的hash值，切換要顯示的組件的名稱

window.onhashchange = function() {
 // 經過location.hash獲取到最新的hash值
}

簡單的實例：

<div id="app">
// 切換組件的超鏈接
<a href="#/zhuye">主頁</a>
<a href="#/keji>科技</a>
<a href="#/caijing>財經</a>
<a href="#/yule">娛樂</a>
// :is屬性指定的組件名稱，把對應的組件渲染到component標籤所在位置
// 能夠把component標籤當前組件的佔位符
<component :is="keji"></component>
</div>

定義四個組件

const zhuye = {
 template； '<h1>da1</h1>'
}


const keji = {
 template: '<h1>da2</h1>'
}


const caijing = {
 template: '<h1>da3</h1>'
}


const yule = {
 template: '<h1>da4</h1>'
}

註冊組件

const vm = new Vue({
 el: '#app',
 data: {},
 // 註冊組件
 components: {
  zhuye,
  keji,
  caijing,
  yule
 }
 })

動態切換

<component :is="comName"></component>


data: {
 comName: 'zhuye'
}

監聽window的onhashchange事件，根據獲取到的最新的hash值，切換要顯示的組件的名稱

window.onhashchange = function() {
 // 經過location.hash獲取到最新的hash值
 console.log(location.hash);
}


href="#/zhuye"

使用switch判斷

switch(location.hash.slice(1) {
 case '/zhuye':
  vm.comName = 'zhuye'
  break;
 case '/keji':
  vm.comName = 'keji'
  break;
 case '/caijing':
  vm.comName = 'caijing'
  break;
 case '/yule':
  vm.comName = 'yule'
  break;
 }

vue-router路由管理器

vue router和vue.js的核心深度集成，能夠方便的用於spa的應用程序開發

它的功能有：

支持HTML5歷史模式，和hash模式；支持嵌套路由；支持路由參數，支持編程式路由，支持命名路由。

路由的進階，導航守衛，路由元信息，過渡效果，數據獲取，滾動行爲，路由懶加載。

vue-router的基本使用

基本使用步驟，第一步，引入相關的庫文件，第二步，添加路由鏈接，第三步，添加路由填充位，第四步，定義路由組件，第五步，配置路由規則並建立路由實例，第六步，把路由掛載到vue根實例中。

router-link中，to表示目標路由的連接，repalce，當點擊時會調用router.replace()而不是router.push()，導航後不會留下history記錄。

<router-link :to="{path: '/a'}" replace></router-link>

append，在當前路徑前添加基路徑。咱們從/a導航到一個相對路徑da，若是沒有配置append，則路徑爲/da，若是配了，則爲/a/da

<router-link :to="{ path: '/da' }" append></router-link>

基本使用步驟，第一步引入相關的庫文件

// 導入vue文件，爲全局window對象掛載vue構造函數
<script src="./lib/vuexxxx.js"></script>


// 導入vue-router文件，爲全局window對象掛載vuerouter構造函數
<script src="./lib/vue-routerxxx.js"></script>

第二步添加路由連接

// router-link是vue中提供的標籤，默認會被渲染爲a標籤
// to屬性默認會被渲染成爲 href 屬性
// to 屬性的默認會被渲染爲#開頭的hash地址
<router-link to="/user">User</router-link>


<router-link to="/register">Register</router-link>

第三步添加路由填充位

// 路由填充位，叫作路由佔位符
// 未來要經過路由規則匹配到的組件
// 會被渲染到router-view所在的位置


<router-view></router-view>

第四步添加定義路由組件，若是有兩個路由，添加兩個組件

var User = {
 template: '<div>user</div>'
}


var Register = {
 template: '<div>register</div>'
}

第五步，最重要，配置路由規則和建立路由實例

// 建立路由實例對象
var router = new VueRouter({
 // routes 是路由規則數組
 routers: {
 // 每一個路由規則都是一個配置對象，其中至少包含path和compontent兩個屬性
 // path表示當前路由規則匹配的hash地址
 {path: '/user', component: User},
 {path: '/register', component: Register}
}}

第六步，把路由掛載到vue根實例中

new Vue({
 el: '#app',
 //爲了可以讓路由規則生效，必須把路由對象掛載到vue實例對象上
 router
});

路由重定向

路由重定向值的是，用戶在訪問地址a的時候，強制用戶跳轉到地址c，從而展現特定的組件頁面，經過路由規則的redirect屬性，指定一個新的路由地址，能夠方便地設置路由的重定向。

var router = new VueRouter({
 routers: [
  // 其中，path表示須要被重定向的原地址，redirect表示將要被重定向的新地址
  {path；'/', redirect: '/user'},
  {path:'/user', component: User},
  {path:'/register', component:Register}
 }
})

vue-router嵌套路由

嵌套路由，是什麼呢？是父級別的路由下有子級別的路由。點擊父級路由連接顯示模板內容，模板內容又有子級別的路由連接，點擊子級別的路由顯示子級別的模板內容。

第一步，建立父級路由組件模板，父級路由連接和父級組件路由的填充位

<p>
 <router-link to="/xxx">xxx</router-link>
 <router-link to="/xx">xx</router-link>
</p>
<div>
// 控制組件的顯示位置
<router-view></router-view>
</div>

第二步，建立子級別的路由模板，子級別路由連接，子級別路由填充位

const Register = {
 template；`<div>
  <h1>dada</h1>
  <router-link to="/register/xxx">xxx</router-link>
  <router-link to="/register/xx">xx</router-link>
  // 子路由填充位置
  <router-view/>
 </div>`
}

第三步，嵌套路由的配置，父級路由經過children屬性配置子級路由

const router = new VueRouter ({
 routes: [
  {path: '/user', component: User },
  { path: '/reg',
    component: Register,
    // 經過children屬性，爲/register添加子路由規則
    children: [
     {path: '/reg/p1', component: p1},
     {path: '/reg/p2', component: p2}
    ]
   }
  ]
 })

建立子路由連接，子路由佔位符的時候，別忘記了要寫子組件的代碼。

comst p1 = {
 template: '<h1>da</h1>'
}

vue-router動態路由匹配

什麼是動態路由匹配，爲啥要動態路由匹配？

場景以下

<router-link to="/user/1">da1</router-link>
<router-link to="/user/2">da2</router-link>
<router-link to="/user/3">da3</router-link>


{ path: '/user/1, component: user}
{ path: '/user/2, component: user}
{ path: '/user/3, component: user}

動態參數， :id

var router = new VueRouter({
 routes: [
  // 動態路徑參數 冒號開頭
  {path: '/user/:id', component: User }
 }
})


const User = {
 // 路由組件中經過 $route.params獲取路由參數
 template: '<div>U {{ $route.params.id }} </div>'
}

路由組件傳遞參數props，將props的值設置爲布爾類型

const router = new VueRouter({
 routes: [
  // 若是props被設置爲true, route.params將會被設置爲組件屬性
  {path: '/user/:id', component: User, params: true }
 ]
})


const User = {
 props: ['id'], // 使用props接收路由參數
 template: '<div>da {{id}} </div>' // 使用路由參數
}

props的值能夠爲對象類型的參數，傳遞動態參數

const router = new VueRouter({
 routes: [
  // 若是props是一個對象，它會被按原樣設置爲組件屬性
  { path: '/user/:id', component: User, props: { name: 'dada', age: 12 }}
 ]
})


const User = {
 props: ['name','age'],
 template: `<div> {{name}} + {{age}} </div>`
}

props的值爲函數類型的參數

const router = new VueRouter({
 routes: {
  // 若是props是一個函數，則這個函數接收 route 對象爲本身的形參
  { path: '/user/:id',
    component: Use,
    props: route => {{ name: 'dada', age: 12, id: route.params.id }}}
   }
  })
  
  const User = {
   props: {'name', 'age', 'id'},
   template: `<div> {{name}} + {{ age }} + {{id}} </div>`
  }

什麼叫作命名路由

路由的name能夠指定命名名稱，不用寫path。命名路由的配置規則

// 路由導航
const router = new VueRouter({
 routes: [
  {
   path: '/user/id',
   name: 'user',
   component: User
  }
 ]
})


<router-link :to="{name:'user', params: {id:1} }">dada</router-link>


router.push({name:'user', params: {id:1} }}

編程時導航，第一種，聲明式導航是經過點擊連接實現導航的方式，如網頁中的a標籤或是vue中router-link標籤；第二種，編程式導航經過JavaScript的形式api實現導航的方式，如網頁中的location.href。

// 編程式導航
this.$router.push('hash地址'


this.$router.go(n)


const User = {
 template: '<div><button @click="goButton">跳轉</button></div>',
 methods: {
  goButton: function(){
   // 用編程的方式控制路由跳轉
   this.$router.push('/register');
  }
 }
}


const da = {
 template: `<div>
  <button @click="goBack">後退</button>
  </div>`
  methods: {
   goBack() {
    this.$router.go(-1)
   }
  }
 }

router.push()方法

router.push('/dada')


router.push( { path: '/dada' })


router.push( { name: '/dada', params； { id: 1 } })


router.push( { path: '/dada', query: {name:'dada'} })

案例，多多使用，路由的基礎語法，嵌套路由，路由的重定向，路由的傳參，編程式導航等。

vue-router默認爲hash模式，使用url的hash來模擬一個完整url，當改變url時，頁面不會從新加載。

const router = new VueRouter({
mode: 'history', 
routes: [...]
})

​

​

命名視圖

​

​

​

​

​

過渡效果

​

參考連接

https://router.vuejs.org/zh/

最後

  • 歡迎加我微信(xiaoda0423)，拉你進技術羣，長期交流學習...
  • 歡迎關注「達達前端」,認真學前端，作個有專業的技術人...

在博客平臺裏，將來的路還很長，也但願本身之後的文章你們能多多支持，多多批評指正，咱們一塊兒進步，一塊兒走花路。

很是感謝讀者能看到這裏，若是這個文章寫得還不錯，以爲「達達」我有點東西的話，以爲我可以堅持的學習，以爲此人能夠交朋友的話， 求點贊，求關注，求分享，對暖男我來講真的

很是有用！！！

推薦閱讀：

2019年的每一天日更只爲等待她的出現，好好過餘生，慶餘年 | 掘金年度徵文

一篇文章帶你瞭解JavaScript中的變量，做用域和內存問題

一篇文章帶你瞭解JavaScript中的語法，數據類型，流程控制語句以及函數

一篇常作錯的經典JS閉包面試題

感謝閱讀，原創不易，喜歡就點個[在看] or [轉發朋友圈]，這是我寫做最大的動力。

意見反饋

若本號內容有作得不到位的地方（好比：涉及版權或其餘問題），請及時聯繫咱們進行整改便可，會在第一時間進行處理。

這是一個有質量，有態度的公衆號

點關注，有好運

​

​

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程