代码
<!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注释掉金不会报错，一直找不到原因。
极客观点
项目管理
HarmonyOS
因為
__dirname是nodejs環境才有的，而且就算是在nodejs那也是顯示當前文件的「完整路徑」，用在vue-router的base沒意義：