01，Vue 路由简单示例

1 ，用HbuildX 新建一个 element-start 项目

2，进入项目 目录 用npm 命令添加 vue-router 模块

3，在src 目录下面新建一个views 资料夹，在views 目录下面新建404.vue ,Home.vue,Login.vue 3个文件

     在这3个文件里面 添加类似这样的代码

<template>
    <div>
        <h2>404 page</h2>
    </div>
</template>

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

 

 

4，在src 目录下面新建一个router 目录，添加index.js

   代码如下：

   

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login.vue'
import Home from '../views/Home.vue'
import NotFound from '../views/404.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }, {
      path: '/login',
      name: 'Login',
      component: Login
    }, {
      path: '/404',
      name: 'notFound',
      component: NotFound
    }
  ]
})

5, 修改 src/main.js

  

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import router from './router/index'
import App from './App.vue'

Vue.use(ElementUI)
Vue.config.devtools=true
new Vue({
    el: '#app',
    router,
    render: h => h(App)
})

6, 修改修改src/APP.vue

<template>
    <div id="app">
        <router-view />
        <div>
            <router-link to="/login">login</router-link>
            <router-link to="/404">404</router-link>
        </div>
    </div>
</template>

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

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

运行 npm run dev  ，在网页里面 通过 http://127.0.0.1:8010/#/login  这样的格式就可以访问到对应的路由