【Vue】Vue路由的安装及页面切换简单示例（图文+完整源代码）

一、安装-路由3版本

输入：npm i vue-router@3

共五个文件：

二、main.js中设置

// 引入Vue
import Vue from 'vue'
// 引入app组件，它是所有组件的父组件
import App from './App.vue'
// 引入VueRouter插件
// eslint-disable-next-line no-unused-vars
import VueRouter from 'vue-router'

import router from './router' // index.js可以省略

Vue.use(VueRouter) //vue-router

// 引入Vuex
// eslint-disable-next-line no-unused-vars
import Vuex from 'vuex'

// 引入store
import store from './store/index.js'

// ElementUI

import ElementUI from 'element-ui' //element-ui的全部组件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI) //使用elementUI


// 关闭vue生产提示
Vue.config.productionTip = false
// 创建vue实例对象 -- vm
const vm = new Vue({
  el: "#app",
  // 完成了这个功能：将APP组件放入窗口中
  render: h => h(App),
  router:router,
  store:store,
  beforeCreate() {
    Vue.prototype.$bus = this;
  },

})
console.log(vm);

三、新建router文件夹及index.js

 index.js

// 引入路由
// eslint-disable-next-line no-unused-vars
import VueRouter from 'vue-router'
import Box_1 from '../pages/Box_1.vue'
import Box_2 from '../pages/Box_2.vue'
// 创建一个路由器

export default new VueRouter({
routes:[

    {
        path:'/Box_1',
        component:Box_1
    },
    {
        path:'/Box_2',
        component:Box_2
    },
]


})

四、App.vue组件

<template>
  <div id="myapp">
    <!-- 第1行 -->

    <div class="left">
      <!-- 路由跳转链接 -->
      <router-link class="box_1" to="/Box_1" active-class="active">
        打开Box_1组件
      </router-link>
      <!-- 路由跳转链接 -->
      <router-link class="box_2" to="/Box_2" active-class="active">
        打开Box_2组件
      </router-link>
    </div>
    <div class="right">
      <!-- 显示路由组件 -->
      <router-view> </router-view>
    </div>
  </div>
</template>

<script>

// 注册组件
export default {
  name: "App",
  data() {
    return {};
  },
};
</script>

<style scoped>
body {
  margin: 0;
  padding: 0;
  background-color: rgb(147, 149, 149);
}
a:link {
  color: #ff0000;
  text-decoration: none;
}
#myapp {
  display: flex;
  flex-direction: row;
}
.left {
  width: 0px;
  height: 100px;
  flex-grow: 4;
  padding-top: 10px;
  /* background-color: rgb(255, 220, 220); */
}
.box_1 {
  display: block;
  width: 150px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px rgb(224, 224, 224) solid;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.box_2 {
  display: block;
  width: 150px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin-top: -1px;
  border: 1px rgb(224, 224, 224) solid;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.box_select {
  background-color: red;
}

.right {
  margin-top: 12px;
  width: 0px;
  height: 100px;
  flex-grow: 6;
  /* background-color: rgb(207, 252, 209); */
  overflow: hidden;
}
.active {
  background-color: rgb(22, 122, 214);
  color: white;
}
</style>

五、Box_1.vue组件

 

<template>
  <div class="m_box">我是Box_1组件!</div>
</template>

<script>
export default {
  name: "Box_1",
};
</script>

<style scoped>
.m_box {
  width: 95%;
  height: 98px;
  border: 1px rgb(253, 211, 211) solid;
  text-align: center;
  line-height: 100px;
  overflow: hidden;
  background-color: rgb(248, 248, 248);
}
</style>

六、Box_2.vue组件

<template>
  <div class="m_box">我是Box_2组件!</div>
</template>

<script>
export default {
  name: "Box_2",
};
</script>

<style scoped>
.m_box {
  width: 95%;
  height: 98px;
  border: 1px rgb(253, 211, 211) solid;
  text-align: center;
  line-height: 98px;
  overflow: hidden;
  background-color: rgb(248, 248, 248);
}
</style>