本文详细介绍了如何在Vue项目中使用`require`方法配置路由。方法一是在`router/index.js`文件中，通过`require`懒加载组件，支持HTML5的History模式。方法二是在`index.js`文件中，直接导入并定义路由组件，如HelloWorld、loading和pickers。这两种方式都展示了Vue-router的基本用法。
方法一：在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
}
]
})
扫一扫
2566
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
