這篇文章主要介紹使用Vue-router和出現(xiàn)空白頁以及路由對象屬性的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

10年的水富網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整水富建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“水富網(wǎng)站設(shè)計(jì)”,“水富網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

Vue-router的使用和出現(xiàn)空白頁

2018.08.28 更新

vue-router：前端路由系統(tǒng)——改變視圖的同時(shí)不會向后端發(fā)出請求

1、 hash

2、history

2018.06.25 更新

get到一個(gè)新技能

import Vue from 'vue'
import Router from 'vue-router'
import api from '../lib/service' //接口文檔

Vue.use(Router)
const router = {
 mode: 'history',
 routes: [{
 chunkName: 'src/pages/index',
 name: 'index',
 path: '/',
 beforeEnter: async (to, from, next) => {
  await api.login().then((res) => {
  console.log(res)
  next()
  }).catch((rej) => {
  console.log('error')
  console.log(rej)
  next()
  })
 },
 component: () => import('../../src/pages/index.vue')
 }]
}

export default new Router(router)

beforeEnter：在加載路由時(shí)可以做一些事情，上面的代碼執(zhí)行的是，在加載之前調(diào)用登陸接口

2018 5.5 更新

空白頁還有一種情況，頁面中數(shù)據(jù)使用的錯誤，會導(dǎo)致空白頁

可以帶參數(shù)傳路由，有興趣的小伙伴可以試試

這個(gè)方法是我經(jīng)常用的

this.$route.push({

 path: '路徑'，
 query: {
   key: 'value'
 }

})

跳轉(zhuǎn)至另一個(gè)頁面時(shí)，這樣獲取傳的參數(shù)

this.$route.query.key

兩種設(shè)計(jì)模式

history/hash

還有一些別的我記錄的方法

$route.path

$route.params

$route.query

$route.hash

$route.matched //路由記錄

$route.name

$route.fullPath //包含查詢參數(shù)和hash完整路徑

route.go(num)

router-link :to=”path”

//原來寫的

自己之前跟著vue教學(xué)視頻跟著老師一起打代碼，現(xiàn)在為了配合課程設(shè)計(jì)準(zhǔn)備自己寫個(gè)vue項(xiàng)目，剛開始就在vue-router上遇到了小坎坷，就想分享一下

放上代碼

main.js

import VueResource from 'vue-resource'
import Index from './pages/index'
import Content from './pages/content'
import router from './router'
import Router from 'vue-router'

Vue.config.productionTip = false

Vue.use(Router)

Vue.use(VueResource)

let routers = new Router({
 mode: 'history',
 routes: [
 {
  path: '/',
  component: Content,
  children: [
  {
   path: '/content',
   component: Content
  }
  ]
 }
 ]
})
/* eslint-disable no-new */
new Vue({
 el: '#app',
 routers,
 template: '',
 components: { Index }
})

index.vue

content.vue

這樣寫下來，沒報(bào)錯，可是運(yùn)行以后就是空白頁

之前是因?yàn)樯身?xiàng)目時(shí)，我就直接用了router，為了不沖突自己生成的router,我自己改了名稱routers， 后來考慮到是不是import router from './router'這個(gè)不起作用，就刪掉了，自己cnpm vue-router。但是還是沒有用。

后來把routers改了， 把這個(gè)routers改成router，頁面就出現(xiàn)了。

let routers = new Router({

當(dāng)然下面的routers也改了。

vue-router的使用流程：

cnpm install vue-router –save；
import Router from vue-router;
Vue.use(Router);
let router = new Router({ 
routes: [//路由路徑] 
});
new Vue({ router })

使用

完畢

然后有幾點(diǎn)注意事項(xiàng)，以下幾點(diǎn)都是我碰到出現(xiàn)了空白頁的情況，po出來可能會有點(diǎn)幫助：

routes：不是routers

let router = new Router({}) 不要亂起名字 //雖然我現(xiàn)在還不知道為什么，有大神可以賜教一下嘛

不要忘記掛載在new Vue({})里面

子路由的路徑前面不要加‘/'

let router = new VueRouter({ 
mode: 'history', 
routes: [ 
{ 
path: '/', 
component: IndexPage 
}, 
{ 
path: '/orderList', 
component: OrderListPage 
}, 
{ 
path: '/detail', 
component: DetailPage, 
redirect: '/detail/count', 
children: [ 
{ 
path: 'analysis', 
component: DetailAnaPage 
} 
] 
} 
] 
})

以上是“使用Vue-router和出現(xiàn)空白頁以及路由對象屬性的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！