vue项目的创建和vue-router的详解

已于 2022-11-29 16:24:12 修改
阅读量820 收藏 1
点赞数
文章标签： vue.js 前端 javascript
于 2022-11-29 16:21:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/PCthedream/article/details/128097996
版权
本文介绍了如何创建Vue项目并详细讲解了vue-router的使用，包括Hash模式、History模式、router-link组件的to和active-class属性、router-view组件的name属性以及vue-router的核心要点，如参数传递方法。
摘要由CSDN通过智能技术生成

一：创建项目

  • 在桌面创建一个新的文件夹，点开新建文件夹在地址位置输入cdm打开黑窗口，然后子啊黑窗口中输入vue create 项目名  创建一个项目。

  • 选择要创建项目的类型 这里我通过方向键的上下键选择最后一个的自定义类型

  • 对项目中需要的内容进行选择    通过空格来进行选择和取消选择

  •  选择vue.js的版本 这里我们选择vue2.x的版本   通过方向键来进行选择

  • 选择路由的模式 输入y就是选择了history模式  ，输入n就是选择了hash模式  我们现在hash模式输入n

最低0.47元/天 解锁文章
PCthedream
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Vue 路由】
落雪映青衣的博客
07-26 1023
Vue路由
Vue3路由配置createRouter、createWebHistory、useRouter,useRoute
看见小狮子没
09-22 1万+
Vue3和Vue2基本差不多，只不过需要将、从中引入，再进行使用。
vue3路由配置
HWL5679的博客
06-24 1555
在 History 模式下，如果你的服务器没有正确配置，用户可能会在直接访问一个深层链接（如/user/123）时遇到 404 错误，因为服务器通常不知道如何响应这样的请求。
Vue3开发教程（ 四、Vue-router基础篇）
weixin_39873136的博客
05-30 4549
介绍vuer-router中的<router-link>、<router-view>、嵌套路由、router-api操作等相关知识，并集将内容集成到demo项目中。
Vue Router深入学习(二)
赤蓝紫の博客
03-15 2638
Vue Router深入学习(二) 通过阅读文档，自己写一些demo来加深自己的理解。(主要针对Vue3) 上一篇：Vue Router深入学习(一) 1. 路由元信息
vue-router 中 meta的用法详解
01-21
如果我想做下面这个功能： 路由 代码： 用这个获取 以上这篇vue-router 中 meta的用法详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
详解vue-router传参的两种方式
01-19
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。...vue-router传参两种方式：params和query params、query是什么？  params：/router1/:id ，/router1/1
详解vue-router 命名路由和命名视图
08-27
Vue-Router 命名路由和命名视图详解 Vue-Router 是一个流行的前端路由库，它提供了许多强大的功能来帮助我们管理应用程序的路由。其中，命名路由和命名视图是两个非常重要的概念，本文将详细介绍这两个概念的实现和...
Vue.js路由组件vue-router使用方法详解
12-29
使用Vue.js + vue-router 创建单页应用是非常简单的。只需要配置组件和路由映射，然后告诉 vue-router 在哪里渲染即可。 一、普通方式基本例子： <!DOCTYPE html> <html lang=en> <head> <...
详解vue-router和vue-cli以及组件之间的传值
12-10
4.创建和挂载根实例 再来说一下vue-cli 一、安装vue-cli脚手架工具 cnpm install vue-cli -g 二、 创建项目 vue init webpack-simple vue_webpack 使用的是webpack-simple模板，项目名为vue_webpack , webpack-...
vue-router 路由超详细教程
热门推荐
weixin_47124112的博客
09-06 3万+
路由（英文： router）就是对应关系Hash 地址与组件之间的对应关系。vue-router是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址：https://router.vuejs.org/zh/2. vue-router 安装和配置的步骤① 安装 vue-router 包② 创建路由模块③ 导入并挂载路由模块④ 声明路由链接和占位符2.1在项目中安装 vue-router。
Vue-Router在Vue2和Vue3中的使用
前端卷王小白的博客
06-22 1409
vue2,vue3,vue-router
vue2项目创建详细过程——（二）配置路由
maoge_666的博客
09-30 1724
vue2项目创建详细过程——（二）配置路由
Vue--Router(路由)
最新发布
m0_63624484的博客
07-17 535
而且我们以前学过重定向等，也是页面跳转，我觉得区别就在于，路由是局部的页面切换。就是不会改变url重新加载一个网页，而是在一个网页上面显示不同的组件，你甚至可以控制这个新的页面切换在哪个位置。我们都知道，使用vue必然会涉及到很多个组件，也就是页面，而页面之间肯定需要切换，比如我点击一个按钮就需要切换另外一个组件(页面)，这就是路由的作用。③ 然后你需要在index.js文件中配置路由的信息，包括导入，配置组件路径，暴露路由等步骤，这这里我将简化后的模板总结出来了，可以直接导入按需求做修改。
Vue-Router详解
凉茶铺的博客
01-24 8097
介绍了Vue-Router的相关知识点
Vue3 Vue-Router详解 Vue3配置hash 和 history路由、Vue3封装的路由hook函数(useRouter,useRoute)的使用 路由懒加载、路由分包处理、魔法注释的使用
akkigg的博客
02-08 3916
Vue3 Vue-Router详解 Vue3配置hash 和 history路由、Vue3封装的路由hook函数(usRouter)的使用 路由懒加载、路由分包处理、魔法注释的使用 路由跳转 NotFount页面配置
【vue2】vue-router的详解
????鱼干～
03-17 1788
【vue2】vue-router的详解
Vue Vue全家桶 - Vue-Router详解
专注于 前端开发 知识分享
10-14 1018
🖥️ Vue3专栏：Vue 从入门到入土🧑‍💼 个人简介：一个不甘平庸的平凡人🍬🍀 格言☀️ 路漫漫其修远兮,吾将上下而求索☀️👉 你的一键三连是我更新的最大动力❤️。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值