安装Vue-router4.X

禾小西

于 2023-10-08 19:47:24 发布

阅读量175

点赞数

分类专栏： Vue零碎知识合集文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45466242/article/details/133688684

版权

本文详细介绍了如何在Vue项目中安装和配置Vue-Router4。首先通过IDEA终端安装，接着创建并配置router/index.js和main.js文件。项目基于Vite构建，通过Vite的dev命令启动，讨论了不同vue-cli版本下的配置差异，并提供了修改默认端口的方法。

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

安装以及配置Vue-Router4

安装Vue-Router4

安装

本次演示使用的IDEA

首先打开我们的IDEA终端（Alt+F12）

输入npm install vue-router@4

如下所示即表示我们安装完成

配置文件

在src目录下创建router文件夹，然后在其下新建一个index.js文件，如下图所示

index.js

import {
    createRouter,createWebHistory } from "vue-router";
import Home from '../views/Home.vue';
const router = createRouter({

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

禾小西

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue Router 4 快速入门

前端精髓

11-21

1万+

现在我们安装 vue-router 版本的时候，默认还是安装的 3.x 版本的，由于 vue3 的更新发生很大的变化，所以为了兼容处理，vue-router 也将发布最新版 4.x 版本了。 vue2配合vue-router3代码是这样的。https://router.vuejs.org/zh/guide/#javascript // 1. 定义 (路由) 组件。 // 可以从其他文件 import 进来 const Foo = { template: '<div>foo</div>

Vue-Router 4.0

weixin_40746230的博客

05-11

1872

vue-router

1 条评论您还未登录，请先登录后发表或查看评论

vue-router@4

过客如期的博客

04-19

2233

一，前言 1.Vue Router 是 Vue.js 的官方路由二，安装 1.npm install vue-router@4 三，vue项目中基础使用搭建 1.创建路由对象createRouter：createRouter是路由的入口，第一步我们就要使用createRouter实例化一个路由对象 import { createRouter, createWebHashHistory } from "vue-router"; export default createRouter { history:

vue4Router

weixin_46486353的博客

06-15

321

vue-路由，导航高亮，严格匹配，路由别名，路由重定向，路由匹配模式，命名路由，命名视图。嵌套路由，编程式导航

Vue全家桶系列之Vue-router(四)

09-26

4527

文章目录1.前言2.路由命名视图3.路由滚动行为 1.前言上篇文章说了vue-router的路由的重定向，路由嵌套，命名路由以及路由的别名的使用，接下来再看看其他的用法 2.路由命名视图有时候想同时 (同级) 展示多个视图，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了，如果 router-view 没有设置名字，那么默认为 default。还是用之前的例子，在home路由上添加一个sidebar视图，先修改下路由配置！ import

vue3.x+vite+ts+vue-router@4.x 路由使用demo

07-24

4. **Vue Router 4.x**：Vue Router 4.x 配置路由时，主要涉及`createRouter`和`createWebHistory`方法。路由定义包括 path、component、props、beforeEnter 等选项。还可以使用 `router-link` 和 `router-view` ...

Vue-Router2.X多种路由实现方式总结

01-21

注意：vue-router 2只适用于Vue2.x版本，...import VueRouter from 'vue-router' import App from './App.vue' Vue.use(VueRouter) 1.定义组件，这里使用从其他文件import进来 import index from './components/inde

vue-cli2.x项目优化之引入本地静态库文件的方法

08-27

'vue-router': 'VueRouter' } }; ``` 通过以上方法，可以有效地优化项目的编译速度和文件大小。根据测试结果，在优化前，编译时长为 8435ms，而在优化后，编译时长降低到 4332ms，减少了约 48.6% 的编译时间。同时...

vue路由 vue-router4

weixin_45730243的博客

05-12

1557

路由 vue-router4保持了大部分API不变，我们只关注变化部分即可。快速开始引入 cdn <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.6/vue-router.cjs.js"></script> npm npm install vue-router@next

Vue Router 路由详解

猫老板的豆

05-10

1207

Vue路由是Vue.js官方的路由管理器，它和Vue.js深度集成，用于构建单页面应用（SPA）。Vue路由通过监听URL的变化，根据URL的不同加载和渲染不同的组件，从而实现单页面应用。当URL变化时，Vue路由会匹配到对应的路由规则，然后加载和渲染该规则对应的组件，而不需要重新加载整个页面。Vue路由使得开发者能够更加方便地管理页面间的导航和组件的渲染。

04 vue之路由vue-router

lisa2017_的博客

03-28

113

三、路由（组件间的跳转）路由器的功能：就是在数据通信时，帮你选择通信的路线在vue中的路由，能够帮助我们在一个vue组件中实现其他组件的相互切换也就是说，可以通过路由模块，将指定的组件显示在路由视图中，如何实现路由跳转？ 1、简介 Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控

Vue(四)——vue-router

黎小小的博客

01-27

305

路由当应用变得复杂以后，我们就需要通过一种便捷、高效的方式来管理应用，最常见的就是通过路由路由：把 url 与应用中的对应的组件进行关联，通过不同的 url 访问不同的组件一、vue-router的安装 npm i vue-router // OR yarn add vue-router 二、Vue.use() 通过前面提到的 Vue.use 方法，把 vue-router 安装到指定的 Vue 实例中 import Vue from 'vue' import Router fro

在IDEA中安装vue-router

qq_43413774的博客

04-23

2288

在IDEA中安装vue-router，我们同样要使用到npm，若没有安装npm请跳转博客Node的安装和npm的使用。我们只需要在IDEA的Terminal中输入一个命令即可 npm install vue-router --save 然后我们将package.json打开出现了vue-router的版本号，这说明安转成功。 ...

vue-router4、vuex4、Pinia

最新发布

zhaoyifei01的博客

05-03

1075

Pinia 是 Vue.js 的轻量级状态管理库中文文档:介绍 | Pinia 中文文档为什么学习 pinia?pinia 和 vuex4 一样，也是 vue官方状态管理工具(作者是 Vue 核心团队成员）pinia 相比 vuex4，对于 vue3 的兼容性更好pinia 相比 vuex4，具备完善的类型推荐=> 对 TS 支持很友好pinia 同样支持 vue开发者工具pinia 的 API 设计非常接近Vuex5的提案。

【Vue3】第十二部分 Vue-Router 4 (路由)

Trees__的博客

09-17

995

【Vue3】第十二部分 Vue-Router 4 (路由) 12. Vue-Router 4 (路由) 12.1 基本的使用 12.2 捕获所有路由或者是404 Not Found 页面 12.3 路由中的params参数 12.4 路由中的query参数 12.5 路由正则 12.6 嵌套路由 12.7 命名路由和命名视图命名路由命名视图 12.8 编程式路由导航 12.9 重定向和取别名 12.10 路由传参 12.11 路由组件传参 12.12 路由守卫全局前置路由守卫路由独享守卫

Vue Router(四)：路由进阶

ArthurWang77的博客

04-26

256

导航守卫 “导航”表示路由正在发生改变。导航守卫可以看做是 vue-router 的生命周期钩子 vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航植入路由导航的机会：全局的, 单个路由独享的, 或者组件级的参数或查询的改变并不会触发进入/离开的导航守卫（通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫通过观察 ...

vue-router4路由动态使用及传参、取参

海阔天空

03-30

3019

vue-router4路由动态使用及传参、取参

vue-router4.x 路由配置(多种方案)

前端技术

09-02

1471

router4x 路由配置(多种方案)

vue-router4.x createWebHistory使用

04-26

关于 vue-router4.x 中 createWebHistory 的注意事项有以下几点： 1. createWebHistory 仅适用于基于浏览器的前端应用程序。 2. 使用 createWebHistory 时必须具有 HTML5 History API。 3. 必须将 router 实例化时...