vue创建项目步骤

# 全局安装 vue-cli

$ npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

# 安装依赖，走你

$ cd my-project

$ npm install

$ npm run dev

在config里index.js改配置自动打开浏览器

安装路由

下载 npm i vue-router -S

创建router.js文件配置 

 1 //引包
 2 import VueRouter from 'vue-router'
 3 //导入对应的路由组件
 4 import Home from './components/home.vue'
 5 //创建路由对象
 6 var router = new VueRouter({
 7   routes:[
 8     //配置路由规则
 9     {path:'/',redirect:'/home'},
10     {path:'/home',component:Home}
11   ]
12 })
13 
14 //把路由对象暴露出去
15 export default router

main.js文件配置

 1 import Vue from 'vue'
 2 import App from './App'
 3 
 4 /*1.1导入路由的包*/
 5 import VueRouter from 'vue-router'
 6 /*1.2 安装路由*/
 7 Vue.use(VueRouter)
 8 
 9 /*1.3 导入自己的router。js路由模块*/
10 import router from './router.js'
11 
12 
13 /* eslint-disable no-new */
14 new Vue({
15   el: '#app',
16   components: { App },
17   template: '<App/>',
18   /*1.4 挂载路由对象到VM实例上*/
19   router
20 })

 在App.vue文件中通过router-view标签引用显示内容

//内容content
    <transition>
      <router-view></router-view>
    </transition>

通过router-link标签to跳转

 <router-link class="mui-tab-item" to="/home">

<router-link class="mui-tab-item" to="/home">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
</router-link>