Article From:https://segmentfault.com/q/1010000010531434
Question:

1.VUEDeveloping mobile terminal APP using vonic UI components
After a project is created using an official template
The following is main.js

import Vue from 'vue'
import Vonic from 'vonic'
import VueRouter from 'vue-router'
import api from './api/api'
import  routes from './router/router'
import util from './public/util'
import axios from 'axios'

Vue.config.productionTip = false

Vue.use(VueRouter)

Vue.prototype.axios=axios;
Vue.prototype.api=api;
Vue.prototype.util=util;



Vue.use(Vonic.app, {
    routes: routes,
    defaultRouteUrl: '/'})

2.Now you want to load the hook function for the route

import Vue from 'vue'
import Vonic from 'vonic'
import VueRouter from 'vue-router'
import api from './api/api'
import  routes from './router/router'
import util from './public/util'
import axios from 'axios'

Vue.config.productionTip = false

Vue.use(VueRouter)

Vue.prototype.axios=axios;
Vue.prototype.api=api;
Vue.prototype.util=util;

const router = new VueRouter({
  routes: routes
})

//Routing filtering to verify whether to log inRouter.beforeEach ((to, from, next) => {Let user = JSON.parse (sessionStorage.getIteM ('user'));If (to.path = ='/login') {SessionStorage.removeItem ('user');}If (! User &am)P; & to.path! ='/login') {Next ({path:'/login'})} else {Next ()}})Vue.use (VOnic.app, {Router,DefaultRouteUrl: '/'))

3.When Vonic is initialized at the bottom, router is loaded as custom router, and the routing is invalid.
Have the relatives ever met this problem?

Answer 0:
//todo 1.Introduction of dependenceImport Vue from'vue'Import Vonic from'vonic/src/index.js'//todo 2. introduces and defines the routing pathImport Index fROM'./components/Index.vue'Import About from'./components/About.vue'Import Test from'./componenTs/Test.vue'Const routes = [{path: '/', component: Index},{path:'/about', component: AbouT},{path:'/Test', component: Test}]//todo 3. set global routing hookImport sess from'./sess'Vonic.app.sEtConfig ('beforeEach', function (to, from, next) {Const to = to.pathConst from = fRom.pathConst scrollTop = Vonic.app.pageContentScrollTop ()Let H = sess.get (to)If (H & & h.history) {Vonic.app.nextDirection ('back')H.history= falseSess.set (to, H)} else {Sess.set (from / '/', {History: true,ScrollTop: scrollTop})Vonic.app.nextDIrection ('forward')}/ / / / customizing the switching direction of some pages})Vonic.app.setConfig ('afterEach', FuNction (to, from, next) {})Vonic.app.setConfig / / defines page switching style (push/replace), defaults to push, and does not recommend replace.''PushMethod','push')//todo 4. starts appVue.use (Vonic.app, {Routes: routes})

Answer 1:

The Vonic1.1.2 is tested. If the routing configuration writes’ / ‘, defaultRouteUrl will not work.

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *