方法一:在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
}
]
})