vue中的路由编写方法

来源:互联网 发布:sql语句计算平均值 编辑:程序博客网 时间:2024/06/01 10:15

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