vue route simple demo

01) main.js introduced router.js file content route file

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false;

new Vue({
    router,
    render: h => h(App),
}).$mount('#app');

02) router.js contents of the file, configure routing (note routes spelling)

import Vue from 'vue'
import Router from 'vue-router'

// 组件模块
import HelloWorld from './components/HelloWorld.vue'

Vue.use(Router);

export default new Router({
    mode:'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: () => import('./views/Home.vue'),
        },
        {
            path: '/login',
            name: 'login',
            component:()=> Import ( './ views / login.vue' ) 
        }, 
        { 
            path: '/ the HelloWorld' , 
            name: 'the HelloWorld' , 
            Component: the HelloWorld 
        }, 
        { 
            path: '*',   // * represents the above path is not a match to show this page 
            name: '404' , 
            Component: () => Import ( / * webpackChunkName: "404" * / './views/404.vue' ), 
        } 
    ] 
})

03) App.vue file, import routes router-view

<template>
  <div id="app">eeee  vue
    <router-view/>
  </div>
</template>

<script>

    export default {
        name: 'app'
    }
</script>

04) views / Home.vue file

<template>
    <div id="fei_demo">
        <h1>home</h1>
        <h2><router-link :to="{ path: 'login' }">login</router-link></h2>
        <h2><router-link :to="{ path: '404' }">404</router-link></h2>
    </div >
</template>

05) views / loginvue file

<template>
    <div id="login_fei">
        <h1>login.vue</h1>
        <router-link :to="{ path: '/' }">Home</router-link>
    </div >
</template>

06) views / 404.vue file

<template>
    <div>
        <p class="page-container">404 page not found</p>
        <h2><router-link :to="{ path: 'HelloWorld' }">404---HelloWorld</router-link></h2>
    </div>
</template>

07) components / HelloWorld.vue file

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>HelloWorld components</h1>
    <h1><router-link :to="{ path: '/' }">Home</router-link></h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
//  props: {
//    msg: String
//  },
    data(){
      return {
          msg:"dafei"
      }
    }
}
</script>