vue2 路由进阶,VueCli 自定义创建项目

这篇具有很好参考价值的文章主要介绍了vue2 路由进阶,VueCli 自定义创建项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、声明式导航-导航链接

1.需求

实现导航高亮效果

vue2 路由进阶,VueCli 自定义创建项目,Vue,前端,javascript,vue.js

如果使用a标签进行跳转的话,需要给当前跳转的导航加样式,同时要移除上一个a标签的样式,太麻烦!!!

2.解决方案

vue-router 提供了一个全局组件 router-link (取代 a 标签)

  • 能跳转,配置to属性指定路径(必须) 。本质还是 a 标签 ,to 无需 #
  • 能高亮,默认就会提供高亮类名,可以直接设置高亮样式

语法: <router-link to="path的值"></router-link>

<div>
  <div class="footer_wrap">
    <router-link to="/find">发现音乐</router-link>
    <router-link to="/my">我的音乐</router-link>
    <router-link to="/friend">朋友</router-link>
  </div>
  <div class="top">
    <!-- 路由出口 → 匹配的组件所展示的位置 -->
    <router-view></router-view>
  </div>
</div>

3.通过router-link自带的两个样式进行高亮

使用router-link跳转后,我们发现。当前点击的链接默认加了两个class的值 router-link-exact-activerouter-link-active

我们可以给任意一个class属性添加高亮样式即可实现功能

二、声明式导航-两个类名

当我们使用<router-link></router-link>跳转时,自动给当前导航加了两个类名

vue2 路由进阶,VueCli 自定义创建项目,Vue,前端,javascript,vue.js

1.router-link-active

模糊匹配(用的多)

to=“/my” 可以匹配 /my /my/a /my/b …
只要是以/my开头的路径 都可以和 to="/my"匹配到

2.router-link-exact-active

精确匹配

to=“/my” 仅可以匹配 /my

三、声明式导航-自定义类名(了解)

1.问题

router-link的两个高亮类名 太长了,我们希望能定制怎么办

2.解决方案

我们可以在创建路由对象时,额外配置两个配置项即可。 linkActiveClasslinkExactActiveClass

const router = new VueRouter({
  routes: [...],
  linkActiveClass: "类名1",
  linkExactActiveClass: "类名2"
})

vue2 路由进阶,VueCli 自定义创建项目,Vue,前端,javascript,vue.js

四、声明式导航-查询参数传参

1.目标

在跳转路由时,进行传参

vue2 路由进阶,VueCli 自定义创建项目,Vue,前端,javascript,vue.js

2.跳转传参

我们可以通过两种方式,在跳转的时候把所需要的参数传到其他页面中

  • 查询参数传参
  • 动态路由传参

3.查询参数传参

  • 如何传参?

    <router-link to="/path?参数名=值"></router-link>

  • 如何接受参数

    固定用法:$router.query.参数名

五、声明式导航-动态路由传参

1.动态路由传参方式

  • 配置动态路由

    动态路由后面的参数可以随便起名,但要有语义

    const router = new VueRouter({
      routes: [
        ...,
        { 
          path: '/search/:words', 
          component: Search 
        }
      ]
    })
    
  • 配置导航链接

    to="/path/参数值"

  • 对应页面组件接受参数

    $route.params.参数名

    params后面的参数名要和动态路由配置的参数保持一致

2.查询参数传参 VS 动态路由传参

  1. 查询参数传参 (比较适合传多个参数)

    1. 跳转:to="/path?参数名=值&参数名2=值"
    2. 获取:$route.query.参数名
  2. 动态路由传参 (优雅简洁,传单个参数比较方便)

    1. 配置动态路由:path: "/path/:参数名"
    2. 跳转:to="/path/参数值"
    3. 获取:$route.params.参数名

    注意:动态路由也可以传多个参数,但一般只传一个

六、动态路由参数的可选符(了解)

1.问题

配了路由 path:“/search/:words” 为什么按下面步骤操作,会未匹配到组件,显示空白?

vue2 路由进阶,VueCli 自定义创建项目,Vue,前端,javascript,vue.js

2.原因

/search/:words 表示,必须要传参数。如果不传参数,也希望匹配,可以加个可选符"?"

const router = new VueRouter({
  routes: [
 	...
    { path: '/search/:words?', component: Search }
  ]
})

七、Vue路由-重定向

1.问题

网页打开时, url 默认是 / 路径,未匹配到组件时,会出现空白

vue2 路由进阶,VueCli 自定义创建项目,Vue,前端,javascript,vue.js

2.解决方案

重定向 → 匹配/后, 强制跳转 /home 路径

3.语法

{ path: 匹配路径, redirect: 重定向到的路径 },
比如:
{ path:'/' ,redirect:'/home' }

八、Vue路由-404

1.作用

当路径找不到匹配时,给个提示页面

2.位置

404的路由,虽然配置在任何一个位置都可以,但一般都配置在其他路由规则的最后面

3.语法

path: “*” (任意路径) – 前面不匹配就命中最后这个

import NotFind from '@/views/NotFind'

const router = new VueRouter({
  routes: [
    ...
    { path: '*', component: NotFind } //最后一个
  ]
})

九、Vue路由-模式设置

1.问题

路由的路径看起来不自然, 有#,能否切成真正路径形式?

  • hash路由(默认) 例如: http://localhost:8080/#/home
  • history路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持,开发环境webpack给规避掉了history模式的问题)

2.语法

const router = new VueRouter({
    mode:'histroy', //默认是hash
    routes:[]
})

十、编程式导航-两种路由跳转方式

1.问题

点击按钮跳转如何实现?

vue2 路由进阶,VueCli 自定义创建项目,Vue,前端,javascript,vue.js

2.方案

编程式导航:用JS代码来进行跳转

3.语法

两种语法:

  • path 路径跳转 (简易方便)
  • name 命名路由跳转 (适合 path 路径长的场景)

4.path路径跳转语法

特点:简易方便

//简单写法
this.$router.push('路由路径')

//完整写法
this.$router.push({
  path: '路由路径'
})

5.name命名路由跳转

特点:适合 path 路径长的场景

语法:

  • 路由规则,必须配置name配置项

    { name: '路由名', path: '/path/xxx', component: XXX },
    
  • 通过name来进行跳转

    this.$router.push({
      name: '路由名'
    })
    

十一、编程式导航-path路径跳转传参

1.问题

点击搜索按钮,跳转需要把文本框中输入的内容传到下一个页面如何实现?

vue2 路由进阶,VueCli 自定义创建项目,Vue,前端,javascript,vue.js

2.两种传参方式

1.查询参数 传参

2.动态路由传参

3.传参

两种跳转方式,对于两种传参方式都支持:

① path 路径跳转传参

② name 命名路由跳转传参

4.path路径跳转传参(query传参)

//简单写法
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
//完整写法
this.$router.push({
  path: '/路径',
  query: {
    参数名1: '参数值1',
    参数名2: '参数值2'
  }
})

接受参数的方式依然是:$route.query.参数名

5.path路径跳转传参(动态路由传参)

//简单写法
this.$router.push('/路径/参数值')
//完整写法
this.$router.push({
  path: '/路径/参数值'
})

接受参数的方式依然是:$route.params.参数值

注意:path不能配合params使用

十二、编程式导航-name命名路由传参

1.name 命名路由跳转传参 (query传参)

this.$router.push({
  name: '路由名字',
  query: {
    参数名1: '参数值1',
    参数名2: '参数值2'
  }
})

2.name 命名路由跳转传参 (动态路由传参)

this.$router.push({
  name: '路由名字',
  params: {
    参数名: '参数值',
  }
})

十三、VueCli 自定义创建项目

1.安装脚手架 (已安装)

npm i @vue/cli -g

2.创建项目

vue create demo01
  • 选项

    Vue CLI v5.0.8
    ? Please pick a preset:
      Default ([Vue 3] babel, eslint)
      Default ([Vue 2] babel, eslint)
    > Manually select features     选自定义
    
  • 手动选择功能

    vue2 路由进阶,VueCli 自定义创建项目,Vue,前端,javascript,vue.js

  • 选择vue的版本

      3.x
    > 2.x
    
  • 是否使用history模式

    vue2 路由进阶,VueCli 自定义创建项目,Vue,前端,javascript,vue.js

  • 选择css预处理

    vue2 路由进阶,VueCli 自定义创建项目,Vue,前端,javascript,vue.js

  • 选择eslint的风格 (eslint 代码规范的检验工具,检验代码是否符合规范)

  • 比如:const age = 18; => 报错!多加了分号!后面有工具,一保存,全部格式化成最规范的样子

    vue2 路由进阶,VueCli 自定义创建项目,Vue,前端,javascript,vue.js

  • 选择校验的时机 (直接回车)

    vue2 路由进阶,VueCli 自定义创建项目,Vue,前端,javascript,vue.js

  • 选择配置文件的生成方式 (直接回车)

    vue2 路由进阶,VueCli 自定义创建项目,Vue,前端,javascript,vue.js

  • 是否保存预设,下次直接使用? => 不保存,输入 N

    vue2 路由进阶,VueCli 自定义创建项目,Vue,前端,javascript,vue.js

  • 等待安装,项目初始化完成

  • 启动项目

    npm run serve
    

十四、通过eslint插件来实现自动修正

  1. eslint会自动高亮错误显示
  2. 通过配置,eslint会自动帮助我们修复错误
  • 如何安装

    vue2 路由进阶,VueCli 自定义创建项目,Vue,前端,javascript,vue.js

  • 如何配置

    // 当保存的时候,eslint自动帮我们修复错误
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // 保存代码,不自动格式化
    "editor.formatOnSave": false
    
  • 注意:eslint的配置文件必须在根目录下,这个插件才能才能生效。打开项目必须以根目录打开,一次打开一个项目

  • 注意:使用了eslint校验之后,把vscode带的那些格式化工具会禁用了 Beatify

settings.json 参考文章来源地址https://www.toymoban.com/news/detail-676887.html

{
    "window.zoomLevel": 2,
    "workbench.iconTheme": "vscode-icons",
    "editor.tabSize": 2,
    "emmet.triggerExpansionOnTab": true,
    // 当保存的时候,eslint自动帮我们修复错误
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // 保存代码,不自动格式化
    "editor.formatOnSave": false
}

到了这里,关于vue2 路由进阶,VueCli 自定义创建项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 手把手教会你!如何快速在VSCode创建一个VUE项目|前端菜鸟进阶版

    对于刚上手的朋友,我们可以先来了解一下什么是vue: VUE :渐进式javaScript框架。 什么是JS(JavaScript):我封装好一个函数,这个函数可以给其他人调用,这个就是一个js 什么是框架:框架的规则。 在项目开始创建之前,我们需要做好以下几点准备,具体操作可在官网下载。

    2024年02月10日
    浏览(49)
  • vue(32) : win10创建vue2基础前端框架

    vue2 element-ui axios 含接口调用示例 开发工具为HBuilderX 3.7.3 等待创建项目 代理后端配置如下, 三个test改成相同的uri前缀即可, uri该签注会代理到后端 proxy: {       // 代理test开头的uri       \\\'/test\\\': {         target: \\\'http://192.168.1.1:8080\\\', // 后端地址         changeOrigin: true, // 开启代

    2024年02月06日
    浏览(39)
  • 前端vue2、vue3去掉url路由“ # ”号——nginx配置

    大家好,我是yma16,本文分享关于vue2、vue3去掉url路由 # 号——nginx配置。 html的 hash模式 HTML的hash模式指的是URL中的锚点部分(#后面的内容)被用于在单个页面中显示不同的内容,而不是导航到不同的页面。例如: 在这个示例中, #about 部分是一个锚点,用于在页面上显示关

    2024年02月11日
    浏览(76)
  • 创建vue2项目

    (1) 使用cmd终端直接创建 在键盘上win+r,输入cmd打开终端窗口,cd进入到vue项目所创建的目录里(我是直接创建在桌面上) 输入创建项目指令(vue create 项目名称) 手动选择项目所需的基本配置选项(按enter键进入) 选择以下几项(按空格选中或者取消选中,选好之后ente

    2024年01月16日
    浏览(40)
  • 如何创建vue2,vue3项目

    前提需安装node.js和Vue CLI node.js:https://nodejs.org/zh-cn Vue CLI: 如何创建一个vue2项目 (1) 使用cmd终端直接创建 进入到vue项目所创建的目录里(我是直接创建在桌面上)  选择vue2 创建项目 完成,发现npm run serve运行后会报错 出现 Conflict: Multiple assets emit different content to the same f

    2024年02月16日
    浏览(50)
  • Vue2项目创建步骤

    空格键是选中与取消,A键是全选 TypeScript 支持使用 TypeScript 书写源码 Progressive Web App (PWA) Support PWA 支持。 Router 支持 vue-router 。 Vuex 支持 vuex 。 CSS Pre-processors 支持 CSS 预处理器。 Linter / Formatter 支持代码风格检查和格式化。 Unit Testing 支持单元测试。 E2E Testing 支持 E2E 测试。

    2023年04月24日
    浏览(43)
  • 使用vue-cli创建vue2项目以及项目配置

    1、安装vue-cli cmd:npm install -g @vue/cli@4.5.19 验证是否安装成功:vue -v   出现版本号说明安装成功 2、创建项目 vue create 项目名称 根据自己的需求选择特性,如下所示: 手动选择: 选择自己需要的特性:例如: 选择vue版本 选择路由模式 (输入y和n都可以,y代表history模式没有

    2024年02月06日
    浏览(62)
  • 前端Vue入门-day06-路由进阶

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 路由的封装抽离 声明式导航 导航链接  两个类名  自定义高亮类名  跳转传参 1. 查询参数传参 2. 动态路由传参 两种传参方式的区别  Vue路由  重定向 404 编程式导航

    2024年02月14日
    浏览(46)
  • 【尚医通】vue3+ts前端项目开发笔记 2 —— 创建项目、封装网络请求、集成elment-plus 、重置样式、准备状态管理/路由 等开发前准备

    服务器地址:http://syt.atguigu.cn 医院接口:http://139.198.34.216:8201/swagger-ui.html 公共数据接口:http://139.198.34.216:8202/swagger-ui.html 会员接口:http://139.198.34.216:8203/swagger-ui.html 短信验证码接口:http://139.198.34.216:8204/swagger-ui.html 订单接口:http://139.198.34.216:8206/swagger-ui.html 文件上传接口:

    2024年02月13日
    浏览(51)
  • 创建一个vue2的脚手架项目(超详细)

    0.前言 在用npm安装vue脚手架之前需要安装node,前面博客有详细安装过程,请读者安装node之后再进行脚手架的安装 1 npm vue2的安装脚手架 2.创建vue2脚手架项目 3.开启服务器 4.在浏览器中输入端口地址 5.项目目录介绍

    2024年02月11日
    浏览(71)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包