Question

这是简单的vue-routing

const Foo = { template: '<div>foo</div>' }
  const Bar = { template: '<div>bar</div>' }


  const routes = [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ];
  const router = new VueRouter({
    routes:routes,
    mode: 'history'
  });

  var app = new Vue({
  router,
  data: {
    message: 'Hello Vue!'
  },
  mounted:function(){

  }
}).$mount('#app');

在 HTML

中

    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
    <router-view></router-view>

当我点击它时，链接正确加载（例如：/foo和/bar）但是如果我刷新任何vue路由网址（即/foo或/bar）网址我会收到错误消息

无法获取页面

我正在使用简单的快递服务器

app.get('/', (req, res) => res.sendFile('index.html',{ root : __dirname}))

Answer 1

您必须将所有路由重定向到主文件index.html。

app.get('/', (req, res) => res.sendFile('index.html',{ root : __dirname}))
app.get('*', (req, res) => res.sendFile('index.html',{ root : __dirname}))

Answer 2

您必须将所有路由重定向到主文件index.html，但是要在路由main之后，所以：

//route main
app.use('/api/example', require('./routes/example')); 
//routes auxiliary
app.get('/', (req, res) => res.sendFile('index.html', { root : __dirname + '/public'}))
app.get('*', (req, res) => res.sendFile('index.html', { root : __dirname + '/public'}))

vue js：页面重新加载时找不到路由

2 个答案: