Vue Router升级版写法

「爱情、让人受尽委屈。」 2022-02-26 06:16 294阅读 0赞

## **router/index.js** ##

import Index from '../pages/Index'
    import Mine from '../pages/Mine'
    import More from '../pages/More'
    import TrendMap from '../pages/TrendMap'
    import Rank from '../pages/Rank'
    import AllIndex from '../pages/AllIndex'
    import MyMessage from '../pages/MyMessage'
    import login from '../pages/login.vue'
    
    import Vue from 'vue' import Router from 'vue-router' Vue.use(Router);
    
    export const scmsRoutes = [//scmsRoutes你自己起名字
      {path: '/', redirect: '/login'},
      {path: '/login', name: 'login', component: login},
      {path: '/index', name: 'Index', component: Index,},
      {path: '/mine', name: 'Mine', component: Mine},
      {path: '/more', name: 'More', component: More},
      {path: './TrendMap', name: 'TrendMap', component: TrendMap},
      {path: '/rank', name: 'Rank', component: Rank},
      {path: '/AllIndex', name: 'AllIndex', component: AllIndex},
      {path: '/MyMessage', name: 'MyMessage', component: MyMessage}
    ];
    
    
    export default new Router({ routes:scmsRoutes,//注意这个routes是官方 Vue Router提供的，必须写这个名字，不然页面出不来（已经踩了一次坑了）
      hashbang: true,
      history: true,
      saveScrollPosition: true,
      suppressTransitionError: true,
    })

--------------------

##       **接着来到main.js文件里面** ##

import Vue from 'vue' import router from './router'//注意这个./router的路径说明一下，它是从根路径开始的,找到的是index.js文件
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    import {post} from './api/http.js'
    import MuseUI from 'muse-ui'
    import 'muse-ui/dist/muse-ui.css' // 加载样式
    import Router from 'vue-router'
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    import $ from 'jquery'
    
    
    
    
    Vue.use(MuseUI);
    Vue.use(VueAxios, axios);
    Vue.use(Router);
    Vue.prototype.$post=post;
    Vue.use(ElementUI);
    
    
    router.beforeEach(function (to, from, next) {//在跳转之前执行
      let toPath = to.path;
      if (toPath === '/Index' || toPath === '/' || toPath === '/Mine')   //判断是否关闭tabbar
        store.commit("setIsIndex", true);
      else
        store.commit("setIsIndex", true);
      next()
    });
    Vue.prototype.$axios=axios;
    
    new Vue({
      el: '#app',
     router,
      store,
      template: '<App/>',
      components: { App }
    })