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文件分開下，真正得到模塊化開發！