How base option works in vue-router

前端 未结 2 707
忘掉有多难
忘掉有多难 2021-01-11 17:36

As par documentation of base option:

The base URL of the app. For example, if the entire single page application is served under /app/, then base shou

2条回答
  •  悲&欢浪女
    2021-01-11 17:46

    The base has a default value of '/'. Drawing analogy from how it is used to route:

    Home
    

    or

    
    

    I just omitted the /app and it works. The base doesn't need to be part of the router-link

    EDIT

    Use of base in vue-router

    (For this test I had used vue-cli with the webpack template.)

    I had my router configurations like so:

    export default new Router({
      base: '/app',
      mode: 'history',
      routes: [
        {
          path: '/',
          name: 'RangeInputDemo',
          component: ComponentDemo
        }
      ]
    })
    

    Adding base as '/app' made no difference to the routing that happened throughout the project, as if the base was still set to '/'.


    I tried to change the url from the server side (the url at which the project is being served).

    So in dev-server.js where :

    var uri = 'http://localhost:' + port 
    

    controls the url of the app, I made a slight modification to:

    var uri = 'http://localhost:' + port + '/app'
    

    This caused the application to show:

    Notice the fullPath being '/' in the vue console (second image).

    Just for double checking, I changed the base to '/' again.


    So, the base property of the router configuration is to set the base url as set by the server, if the server serves the application at a route other than '/' then the base can be used for having the application be run from the set url.


    Since the question requires the routes being moved under /app, I think having /app as the parent route would be the solution in that case, if the server isn't supposed to change the route on which it serves.

提交回复
热议问题