Can help me with Vue-router

1

Hello,
the page don’t show after i have implemented the vue-router

app.js

// Import App Component
import App from './app.vue';
// Import Vue
import Vue from 'vue';

// custom for implement token whit API laravel and request GET/POST
import router from './router'  // import  Router from vue-router
import store from './store'
import Axios from 'axios'

Vue.prototype.$http = Axios;

const token = localStorage.getItem('user-token')
if (token) {
  Vue.prototype.$http.defaults.headers.common['Authorization'] = token
}

Vue.config.productionTip = false



// Import F7
import Framework7 from 'framework7/framework7.esm.bundle.js';

// Import F7 Vue Plugin
import Framework7Vue from 'framework7-vue/framework7-vue.esm.bundle.js';

// Import F7 Styles
import 'framework7/css/framework7.bundle.css';

// Import Icons and App Custom Styles
import IconsStyles from './css/icons.css';
import AppStyles from './css/app.css';


// Init F7 Vue Plugin
Framework7.use(Framework7Vue)

// Init App
new Vue({
  el: '#app',
  template: '<app/>',
  // add custom
  router,
  store,
  // Register App Component
  components: {
    app: App
  }
});

app.vue

<template>
  <!-- App -->
  <f7-app :params="f7params">

    <!-- Statusbar -->
    <f7-statusbar></f7-statusbar>

    <!-- Left Panel -->
    <f7-panel left reveal theme-dark>
      <f7-view url="/panel-left/"></f7-view>
    </f7-panel>

    <!-- Right Panel -->
    <f7-panel right cover theme-dark>
      <f7-view url="/panel-right/"></f7-view>
    </f7-panel>

    <!-- Main View -->
    <f7-view id="main-view" url="/" main class="safe-areas"></f7-view>

    <!-- Popup -->
    <f7-popup id="popup">
      <f7-view>
        <f7-page>
          <f7-navbar title="Popup">
            <f7-nav-right>
              <f7-link popup-close>Close</f7-link>
            </f7-nav-right>
          </f7-navbar>
          <f7-block>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, architecto. Cupiditate laudantium rem nesciunt numquam, ipsam. Voluptates omnis, a inventore atque ratione aliquam. Omnis iusto nemo quos ullam obcaecati, quod.</f7-block>
        </f7-page>
      </f7-view>
    </f7-popup>

    <!-- Login Screen -->
    <f7-login-screen id="login-screen">
      <f7-view>
        <f7-page login-screen>
          <f7-login-screen-title>Login</f7-login-screen-title>
          <f7-list form>
            <f7-list-input
              label="Username"
              name="username"
              placeholder="Username"
              type="text"
            />
            <f7-list-input
              label="Password"
              name="password"
              type="password"
              placeholder="Password"
            />
          </f7-list>
          <f7-list>
            <f7-list-button title="Sign In" login-screen-close></f7-list-button>
            <f7-block-footer>
              <p>Click Sign In to close Login Screen</p>
            </f7-block-footer>
          </f7-list>
        </f7-page>
      </f7-view>
    </f7-login-screen>

  </f7-app>
</template>

<script>

//
import store from './store.js'

export default {
  data () {
    return {
      // Framework7 parameters here
      f7params: {
        id: 'io.framework7.testapp', // App bundle ID
        name: 'Framework7', // App name
        theme: 'auto', // Automatic theme detection
        // App routes
        // routes: routes,
        // view: {
        //   routesBeforeEnter: function(to, from, resolve, reject) {
        //
        //     const router = this;
        //     if (!store.getters.isLoggedIn && to.url !== '/login/') {
        //       reject();
        //       // console.log(store.getters.isLoggedIn);
        //       router.navigate('/login/');
        //       return;
        //     }
        //     // console.log(store.getters.isLoggedIn);
        //     resolve();
        //   }
        // },
      },
    }
  },
  computed : {
    isLoggedIn : function(){ return this.$store.getters.isLoggedIn}
  },
  methods: {
    logout: function () {
      this.$store.dispatch('logout')
      .then(() => {
        this.$router.push('/login')
      })
    // TODO: da togliere il then che sembra non avere senso in quanto c'è il routesBeforeEnter
    }
  },
  created: function () {
    this.$http.interceptors.response.use(undefined, function (err) {
      return new Promise(function (resolve, reject) {
        if (err.status === 401 && err.config && !err.config.__isRetryRequest) {
          this.$store.dispatch(logout)
        }
        throw err;
      });
    });
  }
}
</script>

router.js

import Vue from 'vue'
import Router from 'vue-router'
import store from './store.js'
import Home from './pages/home.vue'
import About from './pages/about.vue'
import Login from './pages/login.vue'
// import Secure from './components/Secure.vue'
// import Register from './components/Register.vue'

Vue.use(Router)

let router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    // {
    //   path: '/register',
    //   name: 'register',
    //   component: Register
    // },
    // {
    //   path: '/secure',
    //   name: 'secure',
    //   component: Secure,
    //   meta: {
    //     requiresAuth: true
    //   }
    // },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    { path : '*' , name: 'notfound', component : About }
  ]
})

router.beforeEach((to, from, next) => {
  if(to.matched.some(record => record.meta.requiresAuth)) {
    if (store.getters.isLoggedIn) {
      next()
      return
    }
    next('/login')
  } else {
    next()
  }
})

export default router
2

vue-router not supported. Use F7’s router

3

Thank you. Now function :slight_smile: