vue中的路由编写方法

方法一：在router/indexs.js文件下配置路由

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',// 使用 HTML5 的 History 路由模式，通过‘/’设置路径
  routes: [
    {
      path: '/',
      name: 'index',
      component: (resolve) => require(['@/page/index'],resolve),
    },
    {
      path: '/list',
      name: 'list',
      component: (resolve) => require(['@/page/list'],resolve),//映射的组件
      meta:{title:'list'}
    },
    {
      path: '/404',
      name: '404',
      commponent: (resolve) => require(['@/page/404'],resolve),
    },
    //访问的路径不存在时，重定向到首页。
    {
      path: '*',
      redirect: '/index'
    }
  ]
})

方法二：在index.js文件中使用import引入配置路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import loading from '@/components/loading'
import pickers from '@/components/pickers'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/loading',
      name: 'loading',
      component: loading
    },
    {
      path: '/pickers',
      name: 'pickers',
      component: pickers
    }
  ]
})