Vue 路由(对路由页面编写做规范)

前言

上一篇写了“Vue 路由拦截（对某些页面需要登陆才能访问）” 的博客，此篇是续上篇对路由页面模块化，可以看到之前的路由配置都写在main.js中，真正开发肯定不能都写在main.js，所以我们要将有关路由的配置另新建一个文件，然后main.js引入使用即可。

先看看以前的路由写法：

routers.js文件

import ShowBlogs from '../components/ShowBlogs.vue'
import AddBlog from '../components/AddBlog.vue'
import SingleBlog from '../components/SingleBlog.vue'
import Login from '../components/Login.vue'
import Test from '../components/Test.vue'
import Music from '../components/Music.vue'
import SingerSong from '../components/SingerSong.vue'
import TimeL from '../components/TimeL.vue'
import Tqh from '../components/Tqh.vue'
import MusicPlayer from '../components/MusicPlayer.vue'
import SetUp from '../components/SetUp.vue'
import Log from '../components/Log.vue'

export default[
    {path:"/",name:'login',component:Login},
    {path:"/index",name:'index',component:ShowBlogs,meta:{requireAuth:true}},
    {path:"/add",name:'add',component:AddBlog,meta:{requireAuth:true}},
    {path:"/blog/singleblog/:id",name:'singleblog',component:SingleBlog,meta:{requireAuth:true}},
    {path:"/test",name:'test',component:Test},
    {path:'/music',name:'music',component:Music,meta:{requireAuth:true}},
    {path:'/singerSong/:name',name:'SingerSong',component:SingerSong,meta:{requireAuth:true}},
    {path:'/TimeL',name:'TimeL',component:TimeL,meta:{requireAuth:true}},
    {path:'/Tqh',name:'Tqh',component:Tqh},
    {path:'/MusicPlayer',name:'MusicPlayer',component:MusicPlayer,meta:{requireAuth:true}},
    {path:'/setUp',name:'setUp',component:SetUp,meta:{requireAuth:true}},
    {path:'/log',name:'log',component:Log,meta:{requireAuth:true}}
]

main.js

import VueRouter from 'vue-router'
import Routes from './router/routers'
Vue.use(VueRouter)

//创建路由
const router = new VueRouter({
  routes:Routes,
  mode:"history"   //去掉#
})

new Vue({
  el: '#app',
  data(){
    return{
      requireAuthNum:1
    }
  },
  router:Routes,
  store,
  components: { App },
  template: '<App/>',
   created () {
    router.beforeEach((to, from, next) => {
    var _this = this;
  // if (to.matched.some(record => record.meta.requireAuth)){  // 判断该路由是否需要登录权限
    //以前一直进入114的else是因为，把index赋值给路由，然后就去判断108，又是index（加上meta.requirAuth）所以就进入115的else，进入递归
   if(to.meta.requireAuth && _this.requireAuthNum==1){

       if(JSON.parse(localStorage.getItem("login"))==null){
          console.log('没有登录')
          _this.$router.push({path: '/',query: {redirect: to.fullPath}})
          next()
       } else {
          _this.requireAuthNum++;
          _this.$router.push({path: to.fullPath})
          next()
        }
    }
    else {
      _this.requireAuthNum = 1;
      next();
    }
});

  }
})

可以看到main.js的vue生命周期create还写了有关路由的配置，创建路由也可以都不需要写在main.js，可写在routers.js文件中；下面我们就来做调整

新写法（优化）

routers.js

import ShowBlogs from '../components/ShowBlogs.vue'
import AddBlog from '../components/AddBlog.vue'
import SingleBlog from '../components/SingleBlog.vue'
import Login from '../components/Login.vue'
import Test from '../components/Test.vue'
import Music from '../components/Music.vue'
import SingerSong from '../components/SingerSong.vue'
import TimeL from '../components/TimeL.vue'
import Tqh from '../components/Tqh.vue'
import MusicPlayer from '../components/MusicPlayer.vue'
import SetUp from '../components/SetUp.vue'
import Log from '../components/Log.vue'

import VueRouter from 'vue-router'
const routes = [
    {path:"/",name:'login',component:Login},
    {path:"/index",name:'index',component:ShowBlogs,meta:{requireAuth:true}},
    {path:"/add",name:'add',component:AddBlog,meta:{requireAuth:true}},
    {path:"/blog/singleblog/:id",name:'singleblog',component:SingleBlog,meta:{requireAuth:true}},
    {path:"/test",name:'test',component:Test},
    {path:'/music',name:'music',component:Music,meta:{requireAuth:true}},
    {path:'/singerSong/:name',name:'SingerSong',component:SingerSong,meta:{requireAuth:true}},
    {path:'/TimeL',name:'TimeL',component:TimeL,meta:{requireAuth:true}},
    {path:'/Tqh',name:'Tqh',component:Tqh},
    {path:'/MusicPlayer',name:'MusicPlayer',component:MusicPlayer,meta:{requireAuth:true}},
    {path:'/setUp',name:'setUp',component:SetUp,meta:{requireAuth:true}},
    {path:'/log',name:'log',component:Log,meta:{requireAuth:true}}
]
const router = new VueRouter({
  routes:routes,
  mode:"history"   //去掉#
})

router.beforeEach((to, from, next) => {
    var _this = this;
    // if (to.matched.some(record => record.meta.requireAuth)){  // 判断该路由是否需要登录权限
    //以前一直进入114的else是因为，把index赋值给路由，然后就去判断108，又是index（加上meta.requirAuth）所以就进入115的else，进入递归
    if(to.meta.requireAuth && _this.requireAuthNum==1){

       if(JSON.parse(localStorage.getItem("login"))==null){
          console.log('没有登录')
         next({
            path: '/',
            query: {redirect: to.fullPath}   //登录成功后重定向到当前页面
          });
          // _this.$router.push({path: '/',query: {redirect: to.fullPath}})
          // next()
       } else {
          _this.requireAuthNum++;
          next({
            path: to.fullPath
          });
          // _this.$router.push({path: to.fullPath})
          // next()
        }
    }
    else {
      _this.requireAuthNum = 1;
      next();
    }
});
export default router;

main.js

import VueRouter from 'vue-router'
import Routes from './router/routers'
Vue.use(VueRouter)

new Vue({
  el: '#app',
  data(){
    return{
      requireAuthNum:1
    }
  },
  router:Routes,
  store,
  components: { App },
  template: '<App/>',
})

可以看到main.js以前有创建路由、vue实例的created的路由拦截，都写在routers.js文件中。

注意：routers.js是不可以 使用_this.$router.push({path: '/',query: {redirect: to.fullPath}})，也就是说在routers文件下使用_this.$router没有这个对象，所以push会报错，只有在非此文件就可以使用this.$router.push，所以我们要对routers.js的路由拦截的beforeEach生命周期做下改变，

将以前 _this.$router.push({path: '/',query: {redirect: to.fullPath}}) ; next();这种写法改成

next({ path: '/', query: {redirect: to.fullPath}  });

这样就将router和main文件分开下，真正得到模块化开发！