vue 路由(vue-router)

router.js:

//安装路由插件
//npm install vue-router / cnpm install vue-router 

//引入vue
import Vue from 'vue';

//引入vue-router
import VueRouter from 'vue-router';

//使用VueRouter
Vue.use(VueRouter);

//创建组件
import re from '../view/vue_resource.vue';
import ax from '../view/axiostest.vue';
import pr from '../view/parent02.vue';
import bi from '../view/binding.vue';

//配置路由
const routes = 
	[{
		path: '/re/:id/:name',
		component : re,
		name: 're'
	}, {
		path: '/ax',
		component : ax,
		children:
			[{
				path: '/pr',
				component : pr
			},
			{
				path: '/bi',
				component : bi
			}]
	}, {
		//默认跳转路由
		path: '*',
		redirect : '/re/0/name'
	}];
	
//实例化
const router = new VueRouter({
    routes // （缩写）相当于 routes: routes
});

//向外暴露
export default router;

//在main.js引入
//import router from './modules/router.js';

//在vue实例化时挂载 router,
/*
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
 */

//在App.vue内
//<router-view></router-view>

//路由跳转
//<router-link to="/re">re</router-link>

main.js:

import Vue from 'vue'
import App from './App.vue'

import VueResource from 'vue-resource';
Vue.use(VueResource);

import router from './modules/router.js';
import store from './modules/store.js';

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

App.vue:

<template>
  <div id="app">
    <div>
    	<!--路由 路径传参-->
    	<router-link to="/re/1/age">re</router-link>
    	<!--路由 get传参-->
      <router-link to="/ax?id=2">ax</router-link>
    </div>
    <!--路由-->
    <router-view></router-view>
    
  </div>
</template>

<script>
	

	
export default {
  //业务逻辑里面定义的数据
  data () {
    return {
      
    }
  },
  //放方法的地方
  methods:{
  	
  },
  /*挂载组件  前面的组件名称不能和html标签一样*/
  components: {
  }
  
}
</script>

<style lang="scss">

</style>

源码:https://github.com/dream-broken/vuedemo/tree/master/src