vue route 简单demo _fei

01) main.js 文件中引入 router.js  文件路由内容

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 文件内容,配置路由( 注意 routes 拼写)

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: '/HelloWorld',
            name: 'HelloWorld',
            component:HelloWorld
        },
        {
            path: '*',  // * 表示上面路径匹配不到的都显示这个页面
            name: '404',
            component: () => import(/* webpackChunkName: "404" */ './views/404.vue'),
        }
    ]
})

03) App.vue 文件,引入路由 router-view

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

<script>

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

04) views/Home.vue 文件

<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 文件

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

06) views/404.vue 文件

<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 文件

<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>