Vue路由配置

1）安装     npm install vue-resource --save

                    npm install json-server --save

环境我已经搭配好了

2）  我是用HBuilder打开刚才搭配的文件夹 Vuedemo(自己搭建的文件夹)/src  (Vuedemo/src)

src文件夹下 打开 App.vue

删掉这个 你的页面就会变成一片空白

3）   打开src/components文件夹 并创立两个vue文件

我建立了 一个Demo.vue 和 About.vue 

4)    把两个文件引用在页面上面去

在Demo.vue文件编写代码 如下图

在App.vue编写代码

 编写成功如下图

5） 打开src文件夹下的main.js编写代码

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import vueRouter from 'vue-router'
import vueResource from 'vue-resource'
import Demo from "./components/demo"
import About from "./components/about"

Vue.use(vueRouter)
Vue.use(vueResource)
Vue.config.productionTip = false
var router=new vueRouter(
	{
		mode:"history",//默认模式hash 去掉#号用history默认的模式是hash
		base:"__dirname",//当前路径
    routes:[
    {path:"/",component:Demo},//当前路径为/表示是主页面
    {path:"/",component:About}
    ]
	}
)
/* eslint-disable no-new */
new Vue({
  //el: '#app',
  //替代a的是router-link
  //替代href是to
  //渲染组件router-view
  router,
  template: `
  

    

      

       demo
       about
      
    
    
  
 `,
    //components: { App }
}).$mount("#app")

6）打开网页 配置成功