方法一:在router/indexs.js文件下配置路由
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
redirect: '/login'
},
{
path: '/index',
component: resolve => require(['../components/common/index.vue'],resolve),
children: [
{
path: '/index',
component: resolve => require(['../components/page/home.vue'], resolve)
},
{
path: '/lists',
component: resolve => require(['../components/page/lists.vue'], resolve)
},
{
path: '/collocation',
component: resolve => require(['../components/page/collocation.vue'], resolve)
},
{
path: '/largerImage',
component: resolve => require(['../components/page/largerImage.vue'], resolve)
},
{
path: '/pics',
component: resolve => require(['../components/page/pics.vue'], resolve)
},
{
path: '/userList',
component: resolve => require(['../components/page/user.vue'], resolve)
},
{
path: '/personal',
component: resolve => require(['../components/page/personal.vue'], resolve)
}
]
},
{
path: '/login',
component: resolve => require(['../components/page/login.vue'], resolve)
},
]
})
方法二:在main.js文件中配置路由
import Vue from 'vue';
import VueRouter from 'vue-router';
import VueAwesomeSwiper from 'vue-awesome-swiper';
import VueResource from 'vue-resource';
import App from './App';
import Selftimer from './components/Selftimer/selftimer';
import Winning from './components/Winning/winning';
import activity from './components/activity/activity';
import seek from './components/login/seekpassword';
import my from './components/my/my'; // 个人页面
import activityDetail from './components/activity/activityDetail';
import recentDetail from './components/activity/recentDetail';
import morePic from './components/morePic/morePic';
import uploader from 'vue-simple-uploader';
// 底部页面
import aboutus from './components/footer/aboutus';
import contact from './components/footer/contact';
import copyright from './components/footer/copyright';
import joinus from './components/footer/joinus';
Vue.config.productionTip = false;
Vue.use(VueRouter);
Vue.use(VueResource);
// vue文件上传
Vue.use(uploader);
// vue-swiper的使用
Vue.use(VueAwesomeSwiper);
// 定义路由
const routes = [
{path: '/', redirect: '/Selftimer', component: Selftimer},
{path: '/Selftimer', component: Selftimer},
{path: '/morePic', component: morePic},
{path: '/activity', component: activity},
{path: '/activity/activity_detail', component: activityDetail},
{path: '/activity/recentDetail', component: recentDetail},
{path: '/Winning', component: Winning},
{path: '/seekpassword', component: seek},
{path: '/my', component: my},
{path: '/aboutus', component: aboutus},
{path: '/copyright', component: copyright},
{path: '/contact', component: contact},
{path: '/joinus', component: joinus}
];
// 定义路由当前
const router = new VueRouter({
linkActiveClass: 'active',
routes
});
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
});