vue项目中使用vue-router

小鱼儿 2023-01-13 05:58 357阅读 0赞

### 说明 ###

> 此处仅做简单记录，并没有做详细的整理。

### 操作步骤 ###

1、通过以下命令安装路由，如下：

npm install vue-router --save-dev

2、在src根目录下新建router文件夹，然后新建router.js文件，输入以下代码：

import Vue from 'vue';
    import Router from 'vue-router';
    
    import DataSource from '../components/system/content/dataSource/DataSource.vue';
    
    Vue.use(Router);
    
    export default new Router({
        routes: [
            {
                path: '/',
                component: DataSource
            }
        ],
        mode: 'history'
    });

3、然后在main.js中引入这个router.js文件，如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70][]

4、在相应的容器中插入<router-view></router-view>和<router-link to='/test'></router-link>标签来配置路由。

另一种方法

在配置好<router-view>之后搭配this.$router.push()方法来实现点击跳转，具体可参看官网文档。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70]: /images/20221022/e18762d2f17745e09c177ccd9bd111e2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，357人围观）

还没有评论，来说两句吧...

相关阅读

相关 VueRouter基础使用

1. 前言本小节我们介绍如何在 Vue 项目中使用 VueRouter。包括 VueRouter 的下载、什么是 VueRouter、如何使用 VueRouter 配置

忘是亡心i/ 2024年03月30日 18:02/ 0 赞/ 109 阅读

相关 vue项目中使用vue-router

要使用vue-router,首先需要在项目根目录的package.json中添加依赖 ![1693641-20190827165636955-1068332743.png][

淡淡的烟草味﹌/ 2023年06月05日 08:25/ 0 赞/ 90 阅读

相关 vue项目中使用vue-router

说明 > 此处仅做简单记录，并没有做详细的整理。操作步骤 1、通过以下命令安装路由，如下： npm install vue-router --s

小鱼儿/ 2023年01月13日 05:58/ 0 赞/ 358 阅读

相关 Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（十四）在项目中使用 jQuery

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（十四）在项目中使用 jQuery 前情回顾在上一篇博文中，我们讲到了，如何

妖狐艹你老母/ 2022年06月09日 13:58/ 0 赞/ 219 阅读

相关 Vue2+VueRouter2+Webpack+Axios 构建项目实战

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（十一）阶段性小结前情回顾去年写的那一套东西，虽然我也写得非常的认真，但是

ゞ浴缸里的玫瑰/ 2022年05月22日 04:36/ 0 赞/ 260 阅读

相关 Vue2+VueRouter3+Webpack3.6+Axios项目实战----vueRouter3整合进项目（四）

项目采用的是VueRouter3.0.1作为路由。下面对vueRouter的配置进行一个详细的记录第一步：定义了2个路由路径，一个是系统首页另外一个是系统登录界面文件

喜欢ヅ旅行/ 2022年05月19日 23:29/ 0 赞/ 268 阅读

相关 Vue2+VueRouter3+Webpack3.6+Axios项目实战----Grunt在项目中的使用（十二）

可能有人会疑问，既然都用webpack了怎么还需要用grunt呢。先介绍下使用背景： [Vue2+VueRouter3+Webpack3.6+Axios项目实战—-定

深碍√TFBOYSˉ_/ 2022年05月19日 04:51/ 0 赞/ 235 阅读

相关 Vue2+VueRouter3+Webpack3.6+Axios项目实战----svg图片在项目中的使用（十一）

svg图片的优点不再阐述，直接讲解怎么集成到项目中。项目中采用的vue2-svg-icon组件，来使用svg图片。第一步：自然就是安装vue2-svg-icon插件

我不是女神ヾ/ 2022年05月19日 04:50/ 0 赞/ 231 阅读

相关使用vue+elementUI+webpack+vueRouter搭建项目

1. vue开发环境搭建 1) node 2) npm / cnpm （npm install -g cnpm --registry=https://r

布满荆棘的人生/ 2022年04月21日 23:06/ 0 赞/ 346 阅读

相关 vue-router源码浅显分析（一）--Vue.use(VueRouter), new VueRouter(options)，HashHistory

1，vue中使用vueRouter需要通过vue.use(vueRouter)，众所周知，这里实际上调用了VueRouter的install方法，对Vue进行了扩展，vueR

朴灿烈づ我的快乐病毒、/ 2022年03月18日 08:44/ 0 赞/ 371 阅读