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 = falseVue.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的使用流程：