Route路由 Vue2

1.路由的概念

 

 

2.路由的基本使用

1.安装

因为我们使用的是Vue2 所以使用的 router 是 3版本 当使用Vue3 的时候就使用 router4 

npm i vue-router@3

2.简单使用

 /router/index.js

//该文件专门创建整个应用的路由器

import VueRouter from 'vue-router';
//引入组件
import MyAbout from '../component/MyAbout.vue'
import MyHome from '../component/MyHome.vue'
/**
 * 创建一个路由器
 */
const router = new VueRouter({
    routes: [
        {
            path: '/about',
            // component: MyAbout
            component: () => import('../component/MyAbout.vue')
        },
        {
            //导入的两种方式
            path: '/home',
            // component: () => import('../component/MyHome.vue')
            component: MyHome
        }
    ]
})

export default router;

 app.vue

<template>
  <div class="appContainer">
   <div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <!-- 原始写法 -->
      <!-- <button @click="choose=0" class="nav-link " :class="buttonChoose[0]" id="v-pills-home-tab" data-toggle="pill" data-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">About</button>
      <button @click="choose=1" class="nav-link " :class="buttonChoose[1]" id="v-pills-profile-tab" data-toggle="pill" data-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Home</button> -->

    <router-link  class="nav-link" active-class="active"  to="/about" >About</router-link>
    <router-link class="nav-link " active-class="active" to="/home"  >Home</router-link>

    </div>
  </div>
  <div class="col-9">
    <div class="panel" >
        <div class="panel-body">
          <!-- 指定组件的呈现位置 -->
           <router-view></router-view>
        </div>
    </div>
  </div>
</div>

  </div>
</template>

<script>


export default {
  name: "App",
  data() {
    return {
      choose:0,
      buttonChoose:[
          {
            active:true,
          },
          {
            active:false,
          }
      ]
    }
  }, 
  watch:{
    choose(newValue){
      for(let i =0;i<this.buttonChoose.length;i++){
          if(i===newValue){
              this.buttonChoose[i].active = true;
          }else{
              this.buttonChoose[i].active = false;
          }
      }
    }
  },
  components: {
  },
  methods: {},
  
};
</script>

<style scoped>




</style>

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//引入 router 
import VueRouter from 'vue-router';
//引入路由器
import router from './router';

Vue.use(VueRouter);

//创建vm
new Vue({
    el: '#app',
    render: (h) => h(App),//放入构造出 App组件模板
    router
})

 两个组件