Vue笔记（二）—— Vue路由入门配置步骤

最新推荐文章于 2025-07-28 16:00:00 发布

原创最新推荐文章于 2025-07-28 16:00:00 发布 · 623 阅读

1 ·

CC 4.0 BY-SA版权

Vue笔记专栏收录该内容

18 篇文章

订阅专栏

本文介绍了Vue路由的入门配置步骤，包括安装vue-router、在main.js中引入、创建routes.js定义路由、在组件中使用router-link进行页面切换。同时，针对router-link与Element UI的el-menu样式兼容问题提出解决方案，通过启用vue-router模式和设置route属性实现无缝集成。

1.加入路由插件：

项目路径下命令行：npm install vue-router

2.main.js文件：

import Vue from 'vue'
import App from './App.vue'
// 引入路由组件
import VueRouter from 'vue-router'
// 引入iView框架
import iView from 'iview'
import 'iview/dist/styles/iview.css'

// 引入自定义路由配置
import routes from './routes'

Vue.config.productionTip = false;

Vue.use(VueRouter);
Vue.use(iView);

const router = new VueRouter({
    linkActiveClass: "active",
    routes:routes.routes
});

new Vue({
    render: h => h(App),
    router,
}).$mount('#app');

3.main.js同级新建routes.js文件：

// 自定义模版页
import SystemUserList from "./SystemUser/SystemUserList";
import SystemRoleList from "./SystemRole/SystemRoleList";

// 路由配置
const routes = [
    {
        path: "/user",
        component: SystemUserList
    }, {
        path: "/role",
        component: SystemRoleList
    },
];

export default {

    name: "routes",
    routes
}

根据实际情况修改步骤3为自己项目内容（模版地址，名称等）；

在需要使用路由的地方：

使用示例：

<router-link to="/user">用户管理</router-link>

在需要替换显示的地方：

替换标记：

<router-view></router-view>

5.浏览器地址栏：localhost:端口/项目名称（如果有）/user

第三步往后～

扩展

router-link与Element（el-menu）样式兼容问题：

1.el-menu增加router属性启用vue-router模式

2.el-menu-item增加route="/xx/xx"设置跳转url

详见Element官方文档：NavMenu 导航菜单