昨天自己在家做了一个前端上线系统，使用到的技术有VUE框架，element-ui, vue-router传送门：https://github.com/liyang1234…页面效果如下：其中的router的使用方法和一些配置文件 webpack入口文件main.js,router的index.js内容如下：使用router官方例子<script src=“https://unpkg.com/vue/dist/vue.js"></script><script src=“https://unpkg.com/vue-router/dist/vue-router.js"></script><div id=“app”> <h1>Hello App!</h1> <p> <!– 使用 router-link 组件来导航. –> <!– 通过传入 to 属性指定链接. –> <!– <router-link> 默认会被渲染成一个 <a> 标签 –> <router-link to="/foo”>Go to Foo</router-link> <router-link to="/bar”>Go to Bar</router-link> </p> <!– 路由出口 –> <!– 路由匹配到的组件将渲染在这里 –> <router-view></router-view></div>router-link标签：跳转的链接，to=““是必须的属性，双引号中的内容是我们接下来在JS文件中定义的路由path。router-view标签：展示我们匹配到的组件的区域router-link的一些属性//to属性 string|object<!– 字符串 –><router-link to=“home”>Home</router-link><!– 渲染结果 –><a href=“home”>Home</a> <!– 使用 v-bind 的 JS 表达式 –><router-link v-bind:to="‘home’">Home</router-link><!– 同上 –><router-link :to=”{ path: ‘home’ }">Home</router-link> <!– 命名的路由 –><router-link :to=”{ name: ‘user’, params: { userId: 123 }}">User</router-link> <!– 带查询参数，下面的结果为 /register?plan=private –><router-link :to="{ path: ‘register’, query: { plan: ‘private’ }}">Register</router-link> //replace属性 true|false 不留下 history 记录。<router-link to=“home” replace>Home</router-link> //append属性 true|false 追加路径<router-link to=“home” append >Home</router-link> //tag属性 string 设置渲染标签<router-link to="/foo" tag=“li”>foo</router-link><!– 渲染结果 –><li>foo</li> //active-class 属性 string 激活时使用的 CSS 类名 // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter) // 1. 定义（路由）组件。 // 也可以从其他文件 import 进来 const Foo = { template: ‘<div>foo</div>’ } const Bar = { template: ‘<div>bar</div>’ } // 2. 定义路由 // 每个路由应该映射一个组件。 其中"component" 可以是 // 通过 Vue.extend() 创建的组件构造器， // 或者，只是一个组件配置对象。 const routes = [ { path: ‘/foo’, component: Foo }, { path: ‘/bar’, component: Bar } ] // 3. 创建 router 实例，然后传 routes 配置 // 你还可以传别的配置参数, 不过先这么简单着吧。 const router = new VueRouter({ routes // （缩写）相当于 routes: routes }) // 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由， // 从而让整个应用都有路由功能 const app = new Vue({ router }).$mount(’#app’) // 现在，应用已经启动了！JavaScript文件主要做的事情是：定义路由列表，即routes。创建router实例及router配置，即router。创建和挂载根实例。以上只是教我们用最简单的方法使用vue-router。但实际开发过程中，首先我们的vue组件显然不会只有一个template模板这么简单，会用到vue的单文件组件；其次我们通常会希望<router-view>的范围是整个页面，而不是像现在这样一直有几个碍眼的导航存在于页面上，这就需要先定义好默认状态下<router-view>显示的内容。既然是单页应用（SPA），那么整个项目有以下三个文件是必要的:一个html文件：index.html一个webpack打包时的入口js文件：main.js一个根vue组件，作为其他组件的挂载点：app.vue用vue-cli生成webpack打包的vue项目npm install webpack -gnpm install vue-cli -g//打开要创建的项目路径目录，创建项目vue init webpack-simple <项目名>cd <项目名>npm install vue-router –savenpm run dev生成的项目类似这样的：在components下面新建两个vue文件 index.vue和hello.vue//index.vue<template> <div> <h2>Index</h2> <hr> <p>{{sContent}}</p> </div></template><script> export default{ data(){ return { sContent:“This is index components” } } }</script>//hello.vue<template> <div> <h2>Hello Vue.js</h2> <hr/> <p>{{sContent}}</p> </div></template><script> export default{ data(){ return { sContent:“This is hello components” } } }</script>修改main.js文件//引入并安装vue-router插件import Vue from ‘vue’;import VueRouter from ‘vue-router’;Vue.use(VueRouter);//引入index.vue和hello.vue组件import App from ‘./App.vue’;import index from ‘./components/index.vue’;import hello from ‘./components/hello.vue’;//定义路由const routes = [ {path:’/’,component:App}, { path: ‘/index’, component: index }, { path: ‘/hello’, component: hello }]//创建 router 实例，然后传 routes 配置const router=new VueRouter({routes});//创建和挂载根实例。通过 router 配置参数注入路由，从而让整个应用都有路由功能new Vue({el:"#app",router});修改App.vue<template><div> 
<h1>{{msg}}</h1> <ul> <router-link to=’/index’ tag=‘li’><a href="/index">Index</a></router-link> <router-link to=’/hello’ tag=‘li’><a href="/hello">Hello</a></router-link> </ul></div></template>修改index.html<!DOCTYPE html><html lang=“en”><head> <meta charset=“utf-8”> <title>vue-webpack-simple</title></head><body> <div id=“app”> <router-view></router-view> </div> <script src="/dist/build.js"></script></body></html>运行效果如下：