基本选项在 vue-router 中的工作原理 [英] How base option works in vue-router

问题描述

作为基本选项的

注意 vue 控制台中的 fullPath 是 '/'(第二张图片).

为了再次检查，我再次将 base 更改为 '/'.

<小时>

因此，router 配置的 base 属性是设置由服务器设置的基本 url，如果服务器在除 '/' 然后 base 可用于让应用程序从设置的 url 运行.

<小时>

由于问题需要将路由移动到 /app 下，我认为在这种情况下，将 /app 作为父路由将是解决方案，如果服务器不是不应该改变它所服务的路线.

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 should use the value "/app/".

But I have tried it like following, It does not seems to work:

const router = new VueRouter({
  base: "/app/",
  routes
})

Demo fiddle.

解决方案

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

<router-link to="home">Home</router-link>

or

<router-link :to="{ path: '/abc'}" replace></router-link>

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.

这篇关于基本选项在 vue-router 中的工作原理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！