vue-router安装和使用

最新推荐文章于 2025-02-10 16:39:58 发布

BangD

最新推荐文章于 2025-02-10 16:39:58 发布

阅读量190

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/BangD/article/details/129765745

版权

本文介绍了如何在Vue项目中安装和使用vue-router。首先通过npm下载并安装vue-router，然后在src目录下创建router文件夹并导入实例。接着配置路由，包括定义多个路由路径及对应的组件。最后展示了如何通过路由跳转方法在应用中切换视图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

脚手架创建项目时，没有选择路由；添加路由方式记录在此：

vue-router安装和使用

下载vue-router
- 指定版本下载
npm i vue-router@3.2.0
- 直接下载默认安装最新版本
npm install vue-router
- 卸载
npm uninstall vue-router
使用vue-router

import Vue from 'vue'

import App from './App.vue'

import ElementUI from 'element-ui';

// src目录下创建router文件夹 引入实例

import router from './router';

import 'element-ui/lib/theme-chalk/index.css';

import Print from 'vue-print-nb'; //引入

import htmlToPdf from '@/plugins/htmlToPdf'

Vue.config.productionTip = false

Vue.use(Print); //注册

Vue.use(ElementUI);

Vue.use(htmlToPdf)

new Vue({

 render: h => h(App),

 router

}).$mount('#app')

router下创建index.js

index.js

import VueRouter  from 'vue-router';
import Vue from 'vue';

// 通过Vue.use() 安装插件
Vue.use(VueRouter );

// 创建router对象
const routes  = [
  {
    path: "/home",
    name:"Home",
    component: () => import('@/view/home/HomeView.vue')
  },
  {
    path: "/shiftSchedule",
    name:"ShiftSchedule",
    component: () => import('@/view/reportTemplates/ShiftSchedule.vue')
  }
]

const router = new VueRouter({
  routes,
  mode: 'history',

});

export default router;

通过路由跳转

<template>
    <div>
        <el-button type="primary" size="small" @click="toSchedule">报表模板</el-button>
    </div>
</template>

<script>
export default {
  mounted() {
  },
  methods:{
    toSchedule() {
      this.$router.push({path: "/shiftSchedule"})
    }
  }
};
</script>

<style lang="scss" scoped></style>