Vue2和Vue3的路由配置

浩瀚无疆~

已于 2023-04-19 20:53:40 修改

阅读量364

点赞数 1

分类专栏： vue 文章标签： javascript vue.js vue

于 2023-04-19 19:38:07 首次发布

本文链接：https://blog.csdn.net/m0_73535798/article/details/130251070

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

该文详细介绍了如何在Vue项目中使用npm安装ElementUI和axios，以及针对Vue2和Vue3的不同配置VueRouter。文章还涵盖了路由的创建、主文件中注入路由以及在组件中使用路由的方法。

摘要由CSDN通过智能技术生成

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

一、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="子路由路径"