vue中的路由编写方法
2017-10-17 11:00
141 查看
方法一:在router/indexs.js文件下配置路由
方法二:在main.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 } });
相关文章推荐
- vue权限路由实现的方法示例总结
- vue 挂载路由到头部导航的方法
- 浅谈vue-router 路由传参的方法
- Vue.js框架路由使用方法实例详解
- vue 路由页面之间实现用手指进行滑动的方法
- Vue 路由切换时页面内容没有重新加载的解决方法
- vue2.0 路由不显示router-view的解决方法
- 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
- vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
- vue路由拦截及页面跳转的设置方法
- Vue下路由History模式打包后页面空白的解决方法
- vue-router 多个路由地址绑定一个组件造成 created 不执行的解决方法
- vue.js使用watch监听路由变化的方法
- Vue.js结合vue-router和webpack编写单页路由项目
- Vue-路由导航菜单栏的高亮设置方法
- vue通过路由实现页面刷新的方法
- vue-router路由参数刷新消失的问题解决方法
- Vue.js结合vue-router和webpack编写单页路由项目
- vue-resource请求实现http登录拦截或者路由拦截的方法
- vue不通过路由直接获取url中参数的方法示例