一.什么是路由：1.理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。2.前端路由：key是路径，value是组件。二.基本使用：1.安装vue-router，命令：npm i vue-router2.应用插件：Vue.use(VueRouter)3.编写router配置项：4.实现切换5.指定展示位置<router-vie
转载
2023-07-05 17:00:36
472阅读
1，安装element : vue add element2，安装路由 ： vue add router3，创建路由的过程 ： (1) 新建 vue页面 main.vue , （2
原创
2022-04-19 16:27:06
432阅读
vue配置路由连接：https://router.vuejs.org/zh/installation.html 额外： 运行vue的两种方法： 一. 1.点击项目文件夹，右键，打开在文件资源管理器中显示 2.打开文件夹路径，输入cmd,运行，打开命令管理器 3.输入运行命令 4.运行成功 二. 1. ...
转载
2021-09-06 17:16:00
2399阅读
2评论
手动配置Vue-router环境1、下载包： npm i vue-router --save或者 npm i vue-router --S 或者用cdn引入2、创建路由的js文件（路由、子路由、重定向、开启history模式）createRouter、createWebHistory//路由文件
import { createRouter, createWebHistory } from 'vue
vue配置路由连接：https://router.vuejs.org/zh/installation.html 额外： 运行vue的两种方法： 一. 1.点击项目文件夹，右键，打开在文件资源管理器中显示 2.打开文件夹路径，输入cmd,运行，打开命令管理器 3.输入运行命令 4.运行成功 二. 1. ...
转载
2021-09-06 17:16:00
392阅读
2评论
Vue路由配置和使用项目中引入路由模块yarn安装vue-router插件yarn add vue-router在项目目录中新建’route’文件夹，新建index.js和routes.jsroutes文件用于建立建立路由表，方便管理//引入需要的路由文件,页面都存放在view文件夹中
import Father from '../../view/father.vue'
import Son fr
转载
2024-09-02 10:34:47
331阅读
目录理解一.基本使用1.安装2.应用插件3.编写 router 配置项二、多级路由三、路由器的两种工作模式hash模式：history模式：四、注意事项 理解vue 提出了路由 route 的概念。 vue 中的路由 route ，是一组映射关系（ key - value ），key 是路径，val
转载
2024-05-30 10:58:55
638阅读
**理解：**一个路由（route）就是一组映射关系（key-value）,多个路由需要路由器（router）进行管理。每个组件都有自己得$route属性，里面存储着自己的路由信息。整个应用只有一个router，可以通过组件的$router属性获取。 ##基本使用 1.安装vue-router，命令 ...
转载
2021-10-16 20:46:00
237阅读
2评论
一般组件我们会有全屏组件，或是在页面的某个部分显示组件，所以路由的第一层一般是全屏显示的，而在/目录下的组件为页面的某个部分显示的，通常需求是这样的，登录是全屏显示的，而普通页面是在页面的某个部分进行切换的。import Vue from 'vue'import Router from 'vue-router'import Home from './views/Home.vue'impor...
原创
2022-11-23 00:07:07
90阅读
1、作用 让路由组件便于接受参数 2、写法(三种) src/router/index.js a、简单 值为对象，通过props传递给组件，组
在脚手架里使用路由1. 安装vue-router到项目中npm i vue-router@3.4.82. 修改目录结构3. 主要代码import Vue from 'vue'
//导入路由模块
import Router from 'vue-router'
//将路由使用的组件导入
import Home from "@/views/Home";
import Second from "@/vie
npm vue路由 复习：1、README.md文件：保存如何使用的命令 （1） npm install:拷项目时可以不拷node_modules文件，运行该命令时，会自动下载node_modules(文件很大) （2） npm run serve:运行环境服务 （3） npm run build： ...
转载
2021-09-14 17:45:00
326阅读
2评论
介绍 Vue Router 是 Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CS
原创
2021-07-25 11:58:30
917阅读
简介Vue Router为Vue官方的路由管理器。
对于大多数单页面应用，都推荐使用官方的vue-router。Vue-router通过管理URL，实现URL和组件进行对应，以及通过URL进行组件之间的切换安装1，进入工程命令行模式2，输入npm install vue-router --save3，效果
转载
2023-05-26 16:24:34
137阅读
在Vue3中，路由的基本配置是通过使用Vue Router库来实现的。以下是Vue3中路由的基本配置步骤：安装Vue Router使用npm或yarn在项目中安装Vue Router：npm install vue-router
// 或者
yarn add vue-router创建路由实例创建一个路由实例并定义路由规则。路由规则是一个对象数组，其中每个对象都定义了一个路由的路径和组件。例如，以下
转载
2024-01-15 15:47:00
169阅读
介绍
Vue Router 是 Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动
原创
2021-07-18 13:33:58
269阅读
文章目录六、 路由6-16-1-16-1-26-1-3 基本使用：6-1-4 几个注意点6-1-5 多级路由6-1-5-16-1-5-2 query参数6-1-5-3 命名路由6-1-5-4 路由的params参数6-1-5-5 路由的props配置6-1-5-6 .```<router-link>```的replace属性6-1-5-7 编程式路由导航6-1-5-8 缓存路由组件6
转载
2024-08-30 12:47:29
73阅读
vue路由的四种跳转方式一、router-link1. 不带参数<router-link :to="{name:'aa'}">
<router-link :to="{path:'/bb'}"> //name,path都行, 建议用name
//注意：router-link中链接如果是'/'开始就是从根路由开始，比如当前此时的路由是xxx/aa，:to="/bb",
///
转载
2023-10-23 10:58:18
315阅读
直接上代码了 有详细注释 每一行都有 仔细读一下就懂了// 路由文档
// 1、导入路由 导入Vue进行挂载
import Router from 'vue-router';
import Vue from 'vue';
Vue.use(Router);
// 2、导入组件进行路由懒加载 (否则可能会出现首页白屏问题并且也会造成很大性能问题)|| 量大的话写个js文件写好路由 然后类似模块一样
转载
2024-07-24 12:46:19
575阅读
Vue Router 路由实现原理 一、概念 通过改变 URL，在不重新请求页面的情况下，更新页面视图。 二、实现方式 更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式： 1.Hash --- 利用 URL 中的hash("#"); 2.利用 History interface 在H
