Vue-router的使用和出现空白页,路由对象属性详解

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)

this.$route.push({

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

}) 

this.$route.query.key

router-link :to=”path”

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 }
})

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

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

<script>
</script>

<style>
</style>

let routers = new Router({

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

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 
} 
] 
} 
] 
})