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>