Detailed steps for using vue-router (element side guide, subcomponent content switching, no parameter passing)

 Hello everyone, I am the blogger of csdn: lqj_ myself

This is my personal blog homepage:

lqj_My blog_CSDN blog-WeChat applet, front-end, python field blogger lqj_ I am good at WeChat applet, front-end, python, etc. https://blog.csdn.net/lbcyllqj?spm=1011.2415 .3001.5343 Bilibili welcome attention:Xiao Miao Develop

Xiaomiao Develop's personal space-Xiaomiao Develop personal homepage-哔哩哔哩Video

This article mainly describes the detailed steps of using vue-router (front-end routing)

Table of contents

1.npm installation (vue2 installs vue-router@3/vue3 installs vue-router@4)

2. main.js register vue-router

3. Create a router configuration file

4. In the parent component (using the element component side guide)

When writing the transformation route, the page changes the loaded content position, using the component (RouterView)

Write "The way of programmatic routing jump" (this.$router.push)

If you enter, you want it to display the page content corresponding to which route

Complete code example of the parent component:

5. Write parent component in App.vue

DemoDynamic demo

---

1.npm installation (vue2 installs vue-router@3/vue3 installs vue-router@4)

 Here I take the actual combat in the project created by vue2 as an example

npm i vue-router@3

2. main.js register 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. Create a router configuration file

Create a file: Create a "router" folder in the src directory, and create "index.js" in it

The configuration code in index.js is as follows:

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. In the parent component (using the element component side guide)

When writing the transformation route, the page changes the loaded content position, using the component (RouterView)

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

Write "The way of programmatic routing jump" (this.$router.push)

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

If you enter, you want it to display the page content corresponding to which route

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

Complete code example of the parent component:

<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. Write parent component in 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>

DemoDynamic demo