VUE框架CLI组件化配置Router实现单页面路由程序省市切换联动------VUE框架

// 导入vue-router对象
import VueRouter from "vue-router";
import Hebei from "../components/hebei.vue";
import Henan from "../components/henan.vue";
// 创建路由器对象(在这个路由器对象中配置路由)
const router = new VueRouter({
    // 在这里配置所有的路由规则
    routes : [
        // 这就是一个路由
        {
            // 路由由path和component组成
            // 这个看作key
            // 只要路径检测到的是/hebei就切换到这个组件
            path : "/hebei",
            // 这个就是路由的value,路由的value是一个组件
            component : Hebei
        },
        {
            path : "/henan",
            component : Henan
        }
    ]
});
// 导出路由器对象
export default router;

// 这句话就等同于我们写的<script src="vue.js">
// 这就是在引入vue
import Vue from 'vue';
// 然后下一步是导入我们的根组件
import App from './App.vue';
// 导入混入
import {mix1} from './mixin.js';
import {mix2} from './mixin.js';
import {mix3} from './mixin.js';
// 导入插件
import {p1} from './plugins';
import VueResource from 'vue-resource';
// 导入Vue-Router插件
import VueRouter from 'vue-router';
// 导入路由器对象
import router from "./router/index.js"
// 导入vuex对象
import store from "./vuex/store.js"
 
//全局混入
Vue.mixin(mix1);
Vue.mixin(mix2);
Vue.mixin(mix3);
 
// 插件的使用通常放在创建Vue对象之前
// 插上插件
Vue.use(p1,1,2,3,4);
// 使用这个插件后,所有的vm和vc都会多一个叫$http的属性
Vue.use(VueResource);
// 一旦使用了这个插件那么创建vue对象的时候就可以传递一个配置项router
// router对象用来接收一个路由器对象
Vue.use(VueRouter);
 
// 这是关闭生产提示信息
Vue.config.productionTip = false
 
// 创建一个共享的VueComponent构造函数
// const VueComponentConstructor = Vue.extend({});
// 创建一个共享的VC对象
// const globalvc = new VueComponentConstructor();
 
 
// 创建VUE实例对象VM
const vm = new Vue({
  // 配置路由器配置
  router : router,
  // 增加了一个全新的配置项,store
  store : store,
  // 加上这个配置项之后,vm及其所有的vc对象上都会有这个属性$store
  // 以后vm和vc的$store都可以获取到这个store对象
  // 删除render函数就会导致报错
  // 因为没有可用的模板翻译器
  // 使用完整的vue.js或使用render函数才能解决这个问题
  // 为什么采用模板编译器的Vue.js放到脚手架呢?
  // 目的是减小体积,VUE.js包括两类,核心和模板编译器
  // 模板编译器可能占用vue.js体积的三分之一
  // 将来打包的时候,模板编译器没有存在的必要了
  // 体积大就会影响速度
  // render函数被自动调用,且会自动传过来一个参数
  // 这个参数是一个函数,createElement是一个函数
  // 这个函数可以用来创建元素
  // 用这个来创建元素就可以省掉我们的vue模板编译器了
  // render(createElement)
  // {
  //   return createElement(App);
  // }
  // 简写就是这个箭头函数
  render: h => h(App),
  // 利用生命周期机制,在对象创建时把我们的vm作为这个对象
  beforeCreate(){
    Vue.prototype.$bus = this;
  }
}).$mount('#app');
// 这里用的是$mount的方式绑定和el的方式是一样的
 
console.log(vm);

<template>
    <div>
        <div>
            <h1>省份</h1>
            <ul>
                <!-- 如果使用的是路由方式,就不能使用a标签超链接了 -->
                <!-- 需要使用vue-router提供的标签router-link -->
                <!-- <li><a href="/hebei">河北省</a></li> -->
                <!-- <li><a href="/henan" class="selected">河南省</a></li> -->
                <!-- router-link将来会被自动编译为a标签 -->
                <!-- active-class点中激活,点中的时候激活这个样式 -->
                <li><router-link to="/hebei" active-class="selected">河北省</router-link></li>
                <li><router-link to="/henan" active-class="selected">河南省</router-link></li>
            </ul>
        </div>
        <!-- 路由视图,起到一个占位的作用 -->
        <router-view></router-view>
    </div>
</template>
 
<script>
export default {
    name : "App"
}
</script>
 
<style>
    .s1{
        margin-left: 100px;
    }
    .selected{
        background-color: aqua;
    }
</style>

<template>
    <div>
        <div class="s1">
            <h2>市区</h2>
            <ul>
                <li>石家庄</li>
                <li>唐山</li>
                <li>保定</li>
                <li>邯郸</li>
            </ul>
        </div>
    </div>
</template>
 
<script>
export default {
    name : "Hebei"
}
</script>
 
<style>
 
</style>

<template>
    <div>
        <div class="s1">
            <h2>市区</h2>
            <ul>
                <li>洛阳</li>
                <li>开封</li>
                <li>安阳</li>
                <li>郑州</li>
            </ul>
        </div>
    </div>
</template>
 
<script>
export default {
    name : "Henan"
}
</script>
 
<style>
 
</style>