您的位置:首页 > 产品设计 > UI/UE

vue中的路由编写方法

2017-10-17 11:00 141 查看
方法一:在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 }
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: