Vue2和Vue3的路由配置

该文详细介绍了如何在Vue项目中使用npm安装ElementUI和axios,以及针对Vue2和Vue3的不同配置VueRouter。文章还涵盖了路由的创建、主文件中注入路由以及在组件中使用路由的方法。
摘要由CSDN通过智能技术生成

目录

一、npm安装

1.element

2.axios通用

3.router路由配置

4.卸载--+un

二、router路由器的使用

1.router--index.js--(需要自己)创建路由

1.Vue2

2.Vue3

2.main.js--注入路由

1.Vue2

2.Vue3

3.App.调用路由组件

1.Vue2

2.Vue3

三.导航菜单中可以使用:router属性


一、npm安装

1.element

element导入-v3
npm install element-plus --save
element导入-v2
npm i element-ui -S

2.axios通用

npm install axios

3.router路由配置

vue3:npm i vue-router@4
vue2:npm i vue-router@3

4.卸载--+un

npm uninstall axios

二、router路由器的使用

主要修改有三个地方

1.router--index.js--(需要自己)创建路由

1.Vue2

import SystemIndex from "@/components/SystemIndex";
import UserManger from "@/components/page/UserManger";
import DictManger from "@/components/page/DictManger";
import UserLogin from "@/components/UserLogin";
//路由需要页面
import VueRouter from "vue-router";
import Vue from "vue";
Vue.use(VueRouter)

//从vue-router里面导入对象
const router = new VueRouter({
    routes: [
        {
            path: "/index",
            component: SystemIndex,
            children:[//子路由
                {path:'dict',
                    component:DictManger
                }
                ,{path:'user',
                    component:UserManger}
            ]
        }
        , {
            path: '/Login',
            component: UserLogin,

        }
    ]
})
export default router;

2.Vue3

//路由需要页面
import SystemIndex from "@/components/SystemIndex";
import UserManger from "@/components/page/UserManger";
import DictManger from "@/components/page/DictManger";
import UserLogin from "@/components/UserLogin";

import {createRouter, createWebHashHistory} from "vue-router";
//从vue-router里面导入对象
const router = createRouter({
//createWebHashHistory..访问时自动添加#,避免和后台冲突
    history: createWebHashHistory(),
    routes: [
        {
            path: '/login',
            component: UserLogin,
        }, {
            path: "/index",
            component: SystemIndex,
            children: [//子路由
                {
                    path: 'dist',
                    component: DictManger
                }
                , {
                    path: 'user',
                    component: UserManger
                }
            ]
        }
    ]
})
export default router;

2.main.js--注入路由

1.Vue2

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from "@/router/index.js";
import VueRouter from "vue-router";
Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.use(VueRouter)
new Vue({
  render: h => h(App),router
}).$mount('#app')

2.Vue3

import { createApp } from 'vue'
import App from './App.vue'
import router from "@/router/index.js";

createApp(App).use(router).mount('#app')

3.App.调用路由组件

1.Vue2

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

2.Vue3

<template>
  <router-link to="/">首页</router-link>
  <router-link to="/user">用户</router-link>
  <!--  路由组件在router-view展示-->
  <router-view></router-view>
</template>
<script>
export default {
  name: 'App',
}
</script>

三.导航菜单中可以使用:router属性

 <el-menu :default-openeds="['1', '3']"
           :router="true">
    <!-- 使用路由-->
    <el-submenu index="1">
      <template slot="title"><i class="el-icon-message"></i>导航一</template>
      <el-menu-item-group>
        <template slot="title">分组一</template>
        <el-menu-item index="user">
          用户管理
        </el-menu-item>
        <el-menu-item index="dict">
          字典管理
        </el-menu-item>
     </el-submenu>
  </el-menu>

:router+"true"使用路由,-----前提是有子路由如下:

path: "/index",
component: SystemIndex,
children:[//子路由
    {path:'dict',
        component:DictManger
    }
    ,{path:'user',
        component:UserManger}
]

index="子路由路径"

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值