Vue routing (write specifications do routing page)

Foreword

Previous wrote "Vue routing interception (for some pages need to login to access)," the blog, this post is a continuation of Part I of modular routing page, you can see the previous routing configuration are written in main.js in development can not really be sure they are written in main.js, so we have to configure the routing of another to create a new file, then you can use main.js introduced.

Take a look at the route before writing:

routers.js file

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)

// create a route 
const Router = new new VueRouter ({
  routes:Routes,
  MODE: "History"    // remove # 
})

new view ({
  on: '#app' ,
  data(){
    return{
      requireAuthNum:1
    }
  },
  router:Routes,
  store,
  components: { App },
  template: '<App/>',
   created () {
    router.beforeEach ((to, from, Next) => {
     var _this = the this ;
   // IF (to.matched.some (Record => record.meta.requireAuth)) {// determines whether the sign-in access route 
    / / previously been entered because else 114, the index assigned to the route, and then go to 108 is determined, is index (plus meta.requirAuth) else it proceeds to 115, the process proceeds recursively 
   IF (to.meta.requireAuth && _this ==. 1 .requireAuthNum ) {

       if(JSON.parse(localStorage.getItem("login"))==null){
          console.log ( 'not logged in' )
          _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 can see the life cycle of vue create also wrote about routing configuration, you can also create a route not need to write in main.js, can be written in routers.js file; Here we do the adjustment

The new wording (optimization)

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"    // remove # 
})

router.beforeEach ((to, from, Next) => {
     var _this = the this ;
     // IF (to.matched.some (Record => record.meta.requireAuth)) {// determines whether the sign-in access route 
    / / previously been entered because else 114, the index assigned to the route, and then go to 108 is determined, is index (plus meta.requirAuth) else it proceeds to 115, the process proceeds recursively 
    IF (to.meta.requireAuth && _this ==. 1 .requireAuthNum ) {

       if(JSON.parse(localStorage.getItem("login"))==null){
          console.log ( 'not logged in' )
         next({
            path: '/',
            Query: {the redirect: to.fullPath}    // login is successful redirected to the current page 
          });
           // . _this $ router.push ({path: '/', Query: {the redirect: to.fullPath}}) 
          / / Next () 
       } the 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 view ({
  on: '#app' ,
  data(){
    return{
      requireAuthNum:1
    }
  },
  router:Routes,
  store,
  components: { App },
  template: '<App/>',
})

You can see main.js used to have to create a route, the route created vue instance interception, they are written in routers.js file.

Note: routers.js is not used _this $ router.push. ({Path: '/', query: {redirect: to.fullPath}})., That is used in routers file $ _this no Router this object, so the push will complain, only non-file you can use this. $ router.push, so to change our route routers.js intercepted beforeEach life cycle to do,

Previously  _this $ router.push ({path: ' /', query: {redirect: to.fullPath}});. Next (); This change wording

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

 

In this way it will be under a separate router and main file, truly modular development!