腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

Vue-router的使用和出現(xiàn)空白頁,路由對象屬性詳解

更新時間：2018年09月03日 14:52:24 作者：fffffff_d

今天小編就為大家分享一篇Vue-router的使用和出現(xiàn)空白頁,路由對象屬性詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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

2018.08.28 更新

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

1、 hash

2、history

2018.06.25 更新

get到一個新技能

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：在加載路由時可以做一些事情，上面的代碼執(zhí)行的是，在加載之前調(diào)用登陸接口

2018 5.5 更新

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

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

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

this.$route.push({

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

})

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

this.$route.query.key

兩種設(shè)計模式

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è)計準(zhǔn)備自己寫個vue項目，剛開始就在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: '<Index/>',
 components: { Index }
})

index.vue

<template>
 <div id="app" class="wrapper">
  <div class="nav">
   <ul>
    <li>首頁</li>
    <li>技術(shù)文檔</li>
    <li>留言</li>
    <li>關(guān)于我</li>
   </ul>
  </div>
  <div class="content">
    <router-view></router-view>
  </div>
  <div class="footer">
   @dwf
  </div>
 </div>


</template>

<script>
</script>

<style>
</style>

content.vue

<template>
 <div>
  1111
 </div>
</template>

<script>
</script>

<style>
</style>

這樣寫下來，沒報錯，可是運行以后就是空白頁

之前是因為生成項目時，我就直接用了router，為了不沖突自己生成的router,我自己改了名稱routers，后來考慮到是不是import router from './router'這個不起作用，就刪掉了，自己cnpm vue-router。但是還是沒有用。

后來把routers改了，把這個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 })

使用

完畢

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

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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: