vue-router（element侧导栏，子组件内容切换，不传参）使用的详细步骤

 大家好，我是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）

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

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

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

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

父组件完整代码示例：

5.App.vue中写入父组件

Demo动态演示