How can i redirect correctly my page with router link in vue js 2

peace3106 0
Viewed 20

i have a problem with router-link component in vue js 2. I create my router file

index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import HomeView from '../views/HomeView.vue';
import OrdersView from '../views/OrdersView.vue';

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/order',
      name: 'order',
      Component: OrdersView
    }
  ]
   
  const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;
})

HomeView.vue

<template>
    <p>HomeView</p>
</template>

<script>
  export default {}
</script>

OrdersView.vue

<template>
    <p>OrdersView</p>
</template>

<script>
  export default {}
</script>

App.vue

<template>
  <div id="app">
    <div class="sidebar-sticky pt-3">
        <ul class="nav flex-column">
          <li class="nav-item">
            <router-link to="/order">Orders</router-link>
          </li>
        </ul>
    </div>
    <div class="container-fluid">
       <div class="row">
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
         <router-view/>
        </main>
       </div>
    <div>
  </div>
</template>

When i run my application , i have any error and when i click on the router link Orders, the content of the OrderView doesn't add to the router-view section.

I have any error. Can you help me why my content of OrderView.vue doesn't put in the app.vue (router-view section)

vue-router vuejs2 vue.js javascript
1 Answers

Your router index.js has multiple syntax errors

  1. The Vue.use() function should be given the VueRouter object not Router.

  2. Creating a Router object which is not a thing.

  3. You're exporting two default values which is not allowed.

  4. Trying to export router which is not in scope

When everything is corrected you should have a file that looks like this:

import Vue from 'vue';
import VueRouter from 'vue-router';
import HomeView from '../views/HomeView.vue';
import OrdersView from '../views/OrdersView.vue';

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/order',
    name: 'order',
    Component: OrdersView
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

I would recommend coding with an IDE such as Visual Studio Code with Vetur extension if you're not. All these errors are normally caught and highlighted in your code well before running your app with such a setup.

yoduh0
Related