[Vuejs]-Redirect page on vue.js from node.js

by

0👍

create a route /auth/resetpassword/:id

const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const Resetpassword = { template: '<p>Reset password</p>' }

const routes = {
  '/': Home,
  '/about': About,
  '/auth/resetpassword/:id' : Resetpassword
}

new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute] || NotFound
    }
  },
  render (h) { return h(this.ViewComponent) }
})

which can be accessed by $route.params.id

0👍

There are tons of ways to make the server render a vue.js page. It depend on what you need on real production app.

Method 1: Serve your Vue app as static resources

You can just adjust your webpack bundle output path to your Node.js public directory. Serve them as static files(html document, css, js …) in your Node.js server, just like any multi-page application you have. So you have to define every route rules the Vue app has to your node.js routes including /auth/resetpassword/. Also review all your static resource path. And you can access the vue app by localhost:3000/auth/resetpassword/.

If you use Vue CLI 3 and express:

vue.config.js

// adjust bundle output path:
module.exports = {
  // ...
  outputDir: '../your-node-server/public/vue-app/',
  assetsDir: '../your-node-server/assets/',
  // ...
}

// and run `vue-cli-service build`

/your-node-server/routes.js

app.get('/auth/resetpassword/:token', function (req, res) {
  res.render('./public/vue-app/index.html');
});

// vue app may access some static assets e.g. http://localhost:3000/assets/logo.png
app.use('/assets', express.static(__dirname + '/assets'));

Method 2: Separate Vue app server and API server

You can serve the vue app on the same way. Make the request url which has /api prefix to access localhost:3000, others request to access localhost:8080 by adjusting your nginx config providing reverse proxy.

something like:

etc/nginx/conf.d

// ...
location /api {
    proxy_pass http://127.0.0.1:3000;
    // ...
}

Leave a comment