大家好，我是csdn的博主：lqj_本人

这是我的个人博客主页：

lqj_本人的博客_CSDN博客-微信小程序,前端,python领域博主lqj_本人擅长微信小程序,前端,python,等方面的知识https://blog.csdn.net/lbcyllqj?spm=1011.2415.3001.5343哔哩哔哩欢迎关注：小淼Develop

小淼Develop的个人空间-小淼Develop个人主页-哔哩哔哩视频

本篇文章主要讲述vue-router（前端路由）使用的详细步骤

目录

1.npm安装（vue2安装vue-router@3/vue3安装vue-router@4）

2.main.js注册vue-router

3.创建router配置文件

4.在父组件中（使用了element组件侧导栏）

写入变换路由时页面改变加载的内容位置，使用组件（RouterView）

写入"编程式路由跳转的方式"（this.$router.push）

若进入就想让其显示哪个路由对应的页面内容

父组件完整代码示例：

5.App.vue中写入父组件

Demo动态演示

---

1.npm安装（vue2安装vue-router@3/vue3安装vue-router@4）

 我这里以vue2创建的项目中实战为示例

npm i vue-router@3

2.main.js注册vue-router

import VueRouter from 'vue-router'
import router from './router/index';
Vue.use(VueRouter)
new Vue({
  el:'#app',
  render: h => h(App),
  router:router
}); 

3.创建router配置文件

创建文件：在src目录下创建"router"文件夹，里面创建"index.js"

index.js里面配置代码如下：

import VueRouter from 'vue-router'
//引用自定义的组件
import ShouYe from '@/components/ShouYe'
import User_Center from '@/components/User_Center'
import user_management from '@/components/user_management'
import info_management from '@/components/info_management'
//抛出自定义声明的路由器
export default new VueRouter({
//给引用的自定义的组件添加名字，路径等属性
    routes:[
        {
            name:'shouye1',
            path:'/ShouYe',
            component:ShouYe,
        },
        {
            name:'usercenter1',
            path:'/User_Center',
            component:User_Center
        },
        {
            name:'usermanagement1',
            path:'/user_management',
            component:user_management
        },
        {
            name:'infomanagement1',
            path:'/info_management',
            component:info_management
        }
    ]
})

4.在父组件中（使用了element组件侧导栏）

写入变换路由时页面改变加载的内容位置，使用组件（RouterView）

<RouterView style="margin-left: 100px;"></RouterView>

写入"编程式路由跳转的方式"（this.$router.push）

methods: {
// 跳转系统首页
    shouye() {
      this.$router.push({
        name: "shouye1",
      });
    },
}

若进入就想让其显示哪个路由对应的页面内容

mounted(){
    this.$router.push({
        name: "shouye1",
      });
  },

父组件完整代码示例：

<template>
  <div>
    <div class="top">
      <img style="margin-left: 70px;" src="../assets/Lielong.png" />
      <div style="color: aliceblue;margin-left: 100px;margin-top: 40px;font-size: larger;">{{ Breadcrumb }}</div>
      <el-button style="font-size: larger;margin-left: 1400px;" type="text" @click="open">退出系统</el-button>
    </div>
    <!-- 主体 -->
    <div class="one">
      <div>
        <el-row >
          <el-col :span="12" class="tac">
            <el-menu default-active="1" class="box" @select="handselect" background-color="#545c64" text-color="#fff"
              active-text-color="#ff0303">
              <el-menu-item style="margin-top: 30px;" index="1" @click="shouye">
                <i class="el-icon-setting"></i>
                <span slot="title">系统首页</span>
              </el-menu-item>
              <el-menu-item index="2" @click="user_center">
                <i class="el-icon-menu"></i>
                <span slot="title">个人中心</span>
              </el-menu-item>
              <el-menu-item index="3" @click="user_management">
                <i class="el-icon-document"></i>
                <span slot="title">客户管理</span>
              </el-menu-item>
              <el-menu-item index="4" @click="info_management">
                <i class="el-icon-setting"></i>
                <span slot="title">信息管理</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </div>
      <RouterView style="margin-left: 100px;"></RouterView>
    </div>
    <!-- 路由组件 -->

  </div>
</template>

<script>
import { RouterView } from 'vue-router';


// import axios from 'axios'
export default {
  props: {
    msg: String
  },
  data() {
    return {
      tab: [
        "系统首页",
        "个人中心",
        "客户管理",
        "信息管理"
      ],
      Breadcrumb: "系统首页",
    };
  },
  mounted(){
    this.$router.push({
        name: "shouye1",
      });
  },
  methods: {
    handselect(res) {
      console.log(res);
      this.Breadcrumb = this.tab[res - 1];
    },
    // 退出系统
    open() {
      this.$confirm("此操作将退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$message({
          type: "success",
          message: "退出成功!"
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消退出"
        });
      });
    },
    // 跳转系统首页
    shouye() {
      this.$router.push({
        name: "shouye1",
      });
    },
    // 跳转个人中心
    user_center() {
      this.$router.push({
        name: "usercenter1",
      });
    },
    // 跳转客户管理
    user_management() {
      this.$router.push({
        name: "usermanagement1",
      });
    },
    // 跳转信息管理
    info_management() {
      this.$router.push({
        name: "infomanagement1",
      });
    }
  },
  components: { RouterView }
}
</script>


<style scoped>
.one{
  display: flex;
  flex-direction: row;
}
.tac {
  width: 200px;
}

.box {
  height: 819px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
}

.top {
  display: flex;
  height: 100px;
  background: #545c64;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
</style>

5.App.vue中写入父组件

<template>
  <div id="app">  
    <Demo_D1 />
  </div>
</template>

<script>
import Demo_D1 from './common/Demo_D1.vue'

export default {
  components: {
    Demo_D1
  },
  
}
</script>

<style>
*{
  padding: 0;
  margin: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

Demo动态演示