使用Vue-router和出現空白頁以及路由對象屬性的示例分析

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

Vue-router的使用和出現空白頁

2018.08.28 更新

vue-router：前端路由系統——改變視圖的同時不會向后端發出請求

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

2018 5.5 更新

空白頁還有一種情況，頁面中數據使用的錯誤，會導致空白頁

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

這個方法是我經常用的

this.$route.push({

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

})

跳轉至另一個頁面時，這樣獲取傳的參數

this.$route.query.key

兩種設計模式

history/hash

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

$route.path

$route.params

$route.query

$route.hash

$route.matched //路由記錄

$route.name

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

route.go(num)

router-link :to=”path”

//原來寫的

自己之前跟著vue教學視頻跟著老師一起打代碼，現在為了配合課程設計準備自己寫個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>技術文檔</li>
    <li>留言</li>
    <li>關于我</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，頁面就出現了。

let routers = new Router({

當然下面的routers也改了。

vue-router的使用流程：

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

使用

完畢

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

routes：不是routers

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

不要忘記掛載在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和出現空白頁以及路由對象屬性的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！