veu-router使用__diename出错

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
</head>

<body>
    <div id="app">
        <h1>Redirect</h1>
        <ul>
            <li>
                <router-link to="/relative-redirect"> /relative-redirect (redirects to /foo)</router-link>
            </li>
            <li>
                <router-link to="/relative-redirect?foo=bar">/relative-redirect?foo=bar (redirects to /foo?foo=bar)</router-link>
            </li>
            <li>
                <router-link to="/absolute-redirect"> /absolute-redirect (redirects to /bar)</router-link>
            </li>
            <li>
                <router-link to="/dynamic-redirect">
                    /dynamic-redirect (redirects to /bar)
                </router-link>
            </li>
            <li>
                <router-link to="/dynamic-redirect/12345">
                    /dynamic-redirect/123 (redirects to /with-params/123)
                </router-link>
            </li>
            <li>
                <router-link to="/dynamic-redirect?to=foo">
                    /dynamic-redirect?to=foo (redirects to /foo)
                </router-link>
            </li>
            <li>
                <router-link to="/dynamic-redirect#baz">
                    /dynamic-redirect#baz (redirects to /baz)
                </router-link>
            </li>
            <li>
                <router-link to="/named-redirect">
                    /named-redirect (redirects to /baz)
                </router-link>
            </li>
            <li>
                <router-link to="/redirect-with-params/123">
                    /redirect-with-params/123 (redirects to /with-params/123)
                </router-link>
            </li>
            <li>
                <router-link to="/not-found">
                    /not-found (redirects to /)
                </router-link>
            </li>
        </ul>
        <router-view class="view"></router-view>
    </div>

<script>
  var Home = {template:'<router-view></router-view>'}
  var Default = {template:'<div>default</div>'}
  var Foo = {template:'<div>Foo</div>'}
  var Bar = {template:'<div>Bar</div>'}
  var Baz = {template:'<div>Baz</div>'}
  var WithParams = {template:'<div>{{$route.params.id}}</div>'}

  var router = new VueRouter({
    mode:'history',
    base:__dirname,
    routes:[
      {
        path:'/',
        component:Home,
        children:[
          {path:'',component:Default},
          {path:'foo',component:Foo},
          {path:'bar',component:Bar},
          {path:'baz',name:'baz',component:Baz},
          {path:'with-params/:id',component:WithParams},
          {path:'relative-redirect',redirect:'foo'}
        ]
      },
      {path:'/absolute-redirect',redirect:'/bar'},
      {
        path:'/dynamic-redirect/:id?',
        redirect:to =>{
          const { hash,params,query } = to;
          if(query.to === 'foo'){
            // /dynamic-redirect?to=foo
            return {path:'/foo',query:null};
          }
          if(hash === '#baz'){
            // /dynamic-redirect#baz
            return {name:'baz',hash:''};
          }
          if(params.id){
            // /dynamic-redirect/12345
            return '/with-params/:id';
          }
          else{
            return '/bar'
          }
        }
      },
      {path:'/named-redirect',redirect:{name:'baz'}},
      {path:'/redirect-with-params/:id',redirect:'/with-params/:id'},
      {path:'*',redirect:'/'}
    ]
  });

  new Vue({
    router,
    el:'#app'
  }).$mount("#app");

</script>

</body>

</html>

游览器报错

图片描述

如果把如果把 base:__dirname注释掉金不会报错,一直找不到原因。

阅读 2.7k
1 个回答

因為 __dirnamenodejs 環境才有的,而且就算是在 nodejs 那也是顯示當前文件的「完整路徑」,用在 vue-routerbase 沒意義:

图片描述

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题