Vue中的客户端路由( 使用 Vue-cli 创建vue项目并生成 Vue-router )

最新推荐文章于 2025-01-07 22:26:13 发布

#秃头小牛

最新推荐文章于 2025-01-07 22:26:13 发布

阅读量712

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_46015513/article/details/119740788

Vue 专栏收录该内容

24 篇文章 ¥19.90 ¥99.00

订阅专栏

本文详细介绍了Vue中如何配置和使用客户端路由，包括Vue-router的安装、hash与history模式的区别、路由模式的选择、声明式与编程式导航、嵌套路由、路由过渡、组件传值的方法，以及重定向和404页面的设置。同时，讨论了不同场景下动态路由、search传值和props传值的应用。

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

掌握:

vue-router路由

配置路由模式:

hash: 使用 url hash值来做路由。
history：依赖html History
abstract: 支持所有js运行环境,如 node.js服务器端。

hash 和 history 区别 ?

hash 能兼容到IE8， history 只能兼容到 IE10；

hash回车刷新会加载到地址栏对应的页面，history一般就是404掉了

hash 就是指 url 尾巴后的 # 号以及后面的字符，history没有底带#，外观上比hash 模好看些

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

#秃头小牛

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

Vue路由模式

yrxnnn的博客

12-30

1568

1.Vue路由原理路由就是用来解析URL以及调用对应的控制器，并返回从视图对象中提取好的网页代码给web服务器,最终返回给客户端。 2.Vue路由模式总共有Hash和History两种模式 Hash模式：在浏览器里面的符号 “#”，以及"#"后面的字符称之为Hash，用window.location.hash读取。 Hash模式的特点：用来知道浏览器的动作，对服务端安全无用；hash不会重加载页面； History模式：history采用HTML5的新特性，使页面更美观，并且提供了两种新方法：pushS

vue 项目打包客户端（简单用法） electron-builder ，nodewebkit

weixin_47694910的博客

05-06

3278

方法一. 使用 nodewebkit 进行打包 1. 下载 nodewebkit ，官网下载即可 2.下载完成，将压缩包解压为文件夹，例子：下图 3.新建文件夹，其中需要有两个文件，package.json 文件和index.html 文件 4.将这两个文件打包为.zip格式的压缩包，然后修改压缩包后缀名为.nw。 5.将步骤4生成的.nw文件复制到步骤二的nw文件夹中 6. 从nw文件夹进入cmd，执行命令 copy /b nw.....

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

vue 客户端

05-29

支持路由机制，代理前端抽屉的前端页面，另外附带后台调用接口，可以作为vue入门级别很好锻炼demo

Vue-router实现客户端路由

weixin_33827731的博客

05-11

399

1 创建一个项目 vue create test-vue 2 安装vue-router npm install vue-router --save 3 引入vue-router [main.js] import VueRouter from 'vue-router' Vue.use(VueRouter) 4 基本用法 [router.js] import {routes} from './rou...

使用Vue CLI快速创建vue-router应用

richest_qi的博客

06-28

349

全局安装Vue CLI npm install -g @vue/cli 快速创建基于vue-router的应用得到如下目录，改造项目 main.js，不做修改 import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App).use(router).mount('#app') app.vue，添加针对Test页面的路由 <template

在vue-cli脚手架中配置一个vue-router前端路由

08-30

在这篇文章中，我们详细介绍了如何在 vue-cli 脚手架中配置一个 vue-router 前端路由，包括安装依赖项、创建路由实例、挂载路由实例到 Vue 实例等步骤。希望本文的内容能够对大家的学习或者工作带来一定的帮助。

vue-router-invoke-webpack-plugin:根据文件目录自动生成vue-router的路由

05-14

路由自动注入是指根据文件目录的格式自动生成相应的router.js ，每次无需创建模块即可参考手册用法 Webpack 我们需要知道环境是development或production 。所以你应该设置process.env.NODE_ENV等

Vue使用vue-cli创建项目

08-29

Vue 使用 vue-cli 创建项目 ...使用 vue-cli 创建项目可以快速开始新的 Vue 项目，Mint_UI 框架和 vue-router 可以帮助开发者快速构建应用程序的界面和路由管理，而 Vuex 则可以帮助开发者管理应用程序的状态。

vue ui客户端工具

m0_60323584的博客

05-08

575

npm自node.js v0.6.x版以后就内嵌在node.js中，所以安装node.js就可以了。 MacOS系统推荐使用安装包安装，快速便捷。 1.首先在官网下载MacOs的node.js的安装包 2.像安装其他软件一样安装即可，安装好后在终端查看是否安装成功 npm -v 3.安装好npm之后，就可以安装其他工具了 a.安装webpack打包工具，参数-g表示全局安装 stuo npm install webpack -g b.安装vue-cli3.0以上版本脚手架，用于初始化v

vue实现的新闻客户端

06-08

vue实现的新闻客户端，下载解压后先npm install安装依赖，然后npm run dev就可以打开了，供学习用

vue-cli vue-router 一写就会的简单入门实例

渡目成书

05-27

409

项目创建前提本机已经搭建好vue-cli脚手架，创建vue项目进入自己想创建的目录,创建demo的vue项目 vue create demo 也可以使用,下面命令，进入网页进行vue项目的创建 vue ui 安装完成启动默认vue项目 npm run serve http://localhost:8080/ 进行访问，默认项目已经完成 vue-router路由引入进入项目目录，这里是demo,安装完毕，在项目中进行引用 npm install vue-router

Vue中如何刷新router实例

qq_38995952的博客

01-14

1724

我们常常会遇到这么一个需求，做一个CMS系统，权限管理中，根据不同的角色权限动态添加路由，然后添加了路由后如果退出用户进行更换角色后，路由表的权限分配并不完全如自己期望的那样（why？），通过查阅资料以及自己根据对vue的理解，因为router实例没有进行刷新，而vue-router官方api里也没有删除路由的方法，导致重新进行addrouter是基于之前已经进行过addrouter的router实例，根据我对vue的理解，通过强制F5刷新页面重新生成一个新的vue实例进行挂载新的路由可以解决这个问题，但是

Vue(3) 路由的简单使用

郑清

12-10

427

什么是路由？？路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源。路由不包含在vue中，是一个插件，需要单独下载。下载方式① 官方地址：https://router.vuejs.org/zh/ 下载方式② https://unpk...

【搭建一个使用 Vue 和 Electron 的客户端程序】