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 }});
阅读全文
0 0
- vue中的路由编写方法
- vue中的路由及自定义图标
- Vue路由
- vue 路由
- Vue路由
- Vue路由
- vue路由
- Vue-路由
- vue 路由
- vue路由
- vue路由
- vue 路由vue-router
- vue路由 vue-router
- Vue 路由 vue-router
- Vue.js结合vue-router和webpack编写单页路由项目
- Vue.js结合vue-router和webpack编写单页路由项目
- Vue.js结合vue-router和webpack编写单页路由项目
- Vue.js结合vue-router和webpack编写单页路由项目
- python中urllib.quote出现KeyError
- git修改name和email
- JS(二十一)有用的JS函数(持续更新)
- Dubbo的超时重试机制带来的数据重复问题
- js插件--1.swal
- vue中的路由编写方法
- 一个特殊的FTP错误550
- 一个战五渣的cookie使用过程
- docker部署spring cloud项目
- [LeetCode]303. Range Sum Query
- Percona Server 5.7 并行doublewrite 特性
- 文章标题
- 中值滤波器
- maven的使用