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

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

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

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

2018.08.28 更新

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

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 更新

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

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

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

this.$route.push({

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

})

跳轉(zhuǎn)至另一個(gè)頁(yè)面時(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: '<Index/>',
 components: { Index }
})

index.vue

<template>
 <div id="app" class="wrapper">
  <div class="nav">
   <ul>
    <li>首頁(yè)</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>

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

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

后來把routers改了，把這個(gè)routers改成router，頁(yè)面就出現(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)了空白頁(yè)的情況，po出來可能會(huì)有點(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)空白頁(yè),路由對(duì)象屬性詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: