基于vscode开发vue3项目的详细步骤教程 3 前端路由vue-router

这篇具有很好参考价值的文章主要介绍了基于vscode开发vue3项目的详细步骤教程 3 前端路由vue-router。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、Vue下载安装步骤的详细教程(亲测有效) 1_水w的博客-CSDN博客

2、Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目_水w的博客-CSDN博客

3、基于vscode开发vue项目的详细步骤教程_水w的博客-CSDN博客

4、基于vscode开发vue项目的详细步骤教程 2 第三方图标库FontAwesome_水w的博客-CSDN博客

5、基于vscode创建SpringBoot项目,连接postgresql数据库_水w的博客-CSDN博客

6、基于vscode开发vue项目,连接postgresql数据库 3_水w的博客-CSDN博客

目录

一、VueRouter

1、VueRouter安装与使用

2、简单上手

(1)新建vue3项目

(2)单页面演示

【1】App.vue

添加路由链接和路由填充位

【2】Discover.vue、Friends.vue、My.vue三个组件

【Vue】组件命名报错 “Component name “XXX“ should always be multi-word”的解决方法

【3】Discover组件的子组件:TopList.vue、PlayList.vue

【4】配置前端路由 router/index.js

【5】配置main.js

(3)测试


一、VueRouter

Vue路由vue-router是官方的路由插件,能够轻松的管理SPA项目中组件的切换。

  • 它和vue.js是深度集成的,适合用于构建单页面应用。Vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来
  • 这里的路由并不是指我们平时所说的硬件路由器,这里的路由就是SPA(single page application单页应用)的路径管理器。再通俗的说,vue-router就是WebApp的链接路径管理系统
  • 路由实际上就是可以理解为指向,就是我在页面上点击一个按钮需要跳转到对应的页面,这就是路由跳转
  • vue-router 目前有3.x的版本和4.的版本,vue-router 3.x 只能结合 vue2进行使用,vue-router 4.x 只能结合 Vue3 进行使用

官方地址:入门 | Vue Router

1、VueRouter安装与使用

安装命令:

npm install vue-router@4

安装成功后,前端项目中package.json会自动注册, 

vscode开发vue3,java,vue.js,javascript,前端,vscode,java

2、简单上手

(1)新建vue3项目

新建一个Vue3项目,请移步到Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目_水w的博客-CSDN博客

vscode开发vue3,java,vue.js,javascript,前端,vscode,java

下面将会以一个HTML单页面演示Vue Router的基本使用步骤。在vue项目里也是一样的原理。

(2)单页面演示

目前的目录结构,如下所示:

vscode开发vue3,java,vue.js,javascript,前端,vscode,java

【1】App.vue

当前完整代码:

<template>
   <div>
      <div id="app">
        <!--声明路由链接-->
        <router-link to="/discover">发现</router-link>
        <router-link to="/friends">关注</router-link>
        <router-link to="/my">我的音乐</router-link>
        <!--声明路由占位符标签-->
        <router-view></router-view>
      </div>
   </div>
</template>

<script>
export default {
  name: 'App',
  components: {

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

添加路由链接和路由填充位

以下是一个vue提供的标签,默认会被渲染为a标签。

  • 其中有一个to属性,这个to属性会被渲染为href属性,默认值被渲染为 # 开头的hash地址。
  • 简单来说就是当用户点击不同时跳转不同内容,而这个标签就是用户要点击的东西,相当于a标签嘛。

下面这个标签叫路由填充位,就是说未来通过我们的路由规则匹配到的组件,将会被渲染到 router-view所在位置。

  • 简单来说,就是用户点击路由链接,那得跳转内容吧,我们知道的是肯定不是整个页面都跳转,只是页面内相关的局部发生内容改变,这个局部就是router-view所在显示的区域。

【2】Discover.vue、Friends.vue、My.vue三个组件

(1)Discover.vue

<template>
<div>
    <h1>发现</h1>
    <!--声明子路由链接-->
    <router-link to="/toplist">推荐</router-link>
    <router-link to="/playlist">歌单</router-link>
    <hr>
    <!--声明子路由占位符标签-->
    <router-view></router-view>
</div>
</template>

<script>

</script>

<style>

</style>

(2)Friends.vue

<template>
<div>
    <h1>关注</h1>
</div>
</template>

<script>

</script>

<style>

</style>

(3)My.vue

<template>
<div>
    <h1>我的音乐</h1>
    <!--声明路由链接-->
    <router-link to="/book">书</router-link>
    <router-link to="/music">音乐</router-link>
    <!--声明路由占位符标签-->
    <router-view></router-view>
</div>
</template>

<script>

</script>

<style>

</style>

【Vue】组件命名报错 “Component name “XXX“ should always be multi-word”的解决方法

(1)第一种解决方法:修改组件名称为大驼峰,不要用系统中命令常见的名称。

(2)第二种解决方法:在根目录下,打开【.eslintrc.js文件,如果没有就新建,添加下列内容

module.exports = {
    root: true,
    env: {
      node: true
    },
    'extends': [
      'plugin:vue/essential',
      'eslint:recommended'
    ],
    parserOptions: {
      parser: '@babel/eslint-parser'
    },
    rules: {
      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
       //在rules中添加自定义规则
       //关闭组件命名规则
       "vue/multi-word-component-names":"off",
    },
    overrides: [
      {
        files: [
          '**/__tests__/*.{j,t}s?(x)',
          '**/tests/unit/**/*.spec.{j,t}s?(x)'
        ],
        env: {
          jest: true
        }
      }
    ]
  }

注意:修改完,如果还不行,就退出VsCode,再重新打开项目。

vscode开发vue3,java,vue.js,javascript,前端,vscode,java

ok,问题解决了。

【3】Discover组件的子组件:TopList.vue、PlayList.vue

(1)TopList.vue

<template>
<div>
    <h2>推荐</h2>
</div>
</template>
<script></script>
<style></style>

(2)PlayList.vue

<template>
<div>
    <h2>歌单</h2>
</div>
</template>
<script></script>
<style></style>

【4】配置前端路由 router/index.js

接着去配置路由,router下面的index.js,

import {createRouter, createWebHistory} from 'vue-router'
import Discover from '../components/Discover.vue'
import Friends from '../components/Friends.vue'
import My from '../components/My.vue'
import TopList from '../components/TopList.vue'
import PlayList from '../components/PlayList.vue'

const routes = [
  //这里需要将根目录默认为Home,方便实现用户在保持登录 状态下再次登录时直接跳转至主页面
  {
    path:"/",
    redirect:{name:"discover"}
  },
  {
    path: "/discover",
    name: "discover",
    component:Discover,
    children: [
      {path: '/toplist',
      name: 'toplist',
      component: TopList},
      {path: '/playlist',
        name: 'playlist',
        component: PlayList}]
  },
  {
    path: "/friends",
    name: "friends",
    component:Friends,
  },
  {
    path: "/my",
    name: "my",
    component:My,
  },
]
 
const router = createRouter({
  history: createWebHistory(),
  // 指定hash属性与组件的对应关系
  routes
})

// 需要导出router
export default router

【5】配置main.js

import { createApp } from 'vue'
// import ElementPlus from 'element-plus'
import App from './App.vue'
import router from './router'
// import 'element-plus/dist/index.css'
// import 'font-awesome/css/font-awesome.min.css'
// import axios from 'axios'

const app = createApp(App)

// // 配置请求根路径
// axios.defaults.baseURL = 'http://localhost:8088'
// //将axios作为全局的自定义属性,每个组件可以在内部直接访问(Vue3),该部分要放在pp.mount('#app')的全面
// app.config.globalProperties.$http = axios


// app.use(ElementPlus)
app.use(router)

app.mount('#app')

(3)测试

目前的目录结构,如下所示:

vscode开发vue3,java,vue.js,javascript,前端,vscode,java

在浏览器打开http://localhost:8080/进行访问,效果如下图所示: 

vscode开发vue3,java,vue.js,javascript,前端,vscode,java

vscode开发vue3,java,vue.js,javascript,前端,vscode,java 

vscode开发vue3,java,vue.js,javascript,前端,vscode,java 

 文章来源地址https://www.toymoban.com/news/detail-782289.html

 

到了这里,关于基于vscode开发vue3项目的详细步骤教程 3 前端路由vue-router的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • vite+vue3+ts项目构建详细步骤(配置多语言版本)

    时过境迁,我们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁,它们极大地改善了前端开发者的开发体验。 然而,当我们开始构建越来越大型的应用时,需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇

    2024年02月05日
    浏览(47)
  • vue3 解决使用vscode开发工具编辑vue3项目时代码一直标红

    从网上查的,插件还没升级到vue3版本(比如vue3项目根标签可以多个,vue2项目根标签只能有一个,以及等等差异) 解决方法1 然后关闭vscode,再重启vscode就可以了! 解决方法2 将eslint插件卸载重装,就可以解决了!

    2024年02月07日
    浏览(67)
  • 创建一个vite+vue3项目详细教程

    一、首先打开本地磁盘,找到一个存放路径  这里 我选择将新建项目放置在E盘的demo-vitedemo路径下 二、在该路径处打开命令行cmd  三、在打开的命令行中输入创建命令  注意在搭建之前要安装node.js环境依赖,并且确认你的版本 Vite 需要Node.js版本 14.18+,16+。然而,有些模板需

    2024年02月15日
    浏览(54)
  • 基于vscode实现vue3项目创建启动+安装配置路由vue-router实现单页面组件切换

    访问https://nodejs.org/en,点击下载最新版本的nodejs,并安装。 在项目目录文件下,通过cmd运行下述指令。 依次输入下列命令,启动vue项目 在浏览器中加载http://localhost:5173/,页面加载成功,说明vue项目安装启动成功。 建议安装第三方库通过vscode中的终端来操作,项目启动通过

    2024年02月03日
    浏览(84)
  • Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目

    上篇请移步到Vue下载安装步骤的详细教程(亲测有效) 1_水w的博客-CSDN博客 上一篇博文已经对Node.js的安装与配置进行了详细介绍。 另外:文中项目存放的路径及项目名称可根据自身实际情况进行更改。 目录 三、Vue安装配置 1、搭建Vue脚手架 2、通过NPM安装Vue (1)安装Vue脚手架

    2024年02月02日
    浏览(52)
  • 基于Vue3 + Element Plus 的后台管理系统详细教程

    Vue3 概述 Vue.js 是一种轻量级MVVM框架,它通过双向绑定的方式,将视图与数据进行关联,简化了前端开发的流程。Vue3 是 Vue.js 的下一个版本,与早期版本相比,它具有更高的性能和更好的开发体验。 Composition API Vue 3 中最大的新特性是引入了 Composition API,它允许开发人员按照

    2024年02月09日
    浏览(65)
  • vue3 项目搭建教程(基于create-vue,vite,Vite + Vue)

    目录 一、搭建vue3 项目前提条件 二、通过create-vue搭建vue3 项目 三、搭建一个 Vite 项目 四、构建一个 Vite + Vue 项目 五、打开Vue 项目管理器 六、Vite + Vue 项目目录结构 七、Vite.config.ts配置 前提条件 熟悉命令行 已安装 16.0 或更高版本的 Node.js 同时按window+R键,输入cmd,打开命令提

    2024年01月21日
    浏览(79)
  • 2023 最新版IntelliJ IDEA 2023.1创建Java Web前(vue3)后端(spring-boot3)分离 项目详细步骤(图文详解)

    2023 最新版IntelliJ IDEA 2023.1创建Java Web 项目详细步骤(图文详解) 本篇使用当前Java Web开发主流的spring-boot3框架来创建一个Java前后端分离的项目,前端使用的也是目前前端主流的vue3进行一个简单的项目搭建,让你距离Java全栈开发更近一步 🏴‍☠️。 使用版本: “17.0.1”

    2024年02月12日
    浏览(88)
  • VSCode项目打包详细步骤

    一、在线安装Setup Project 二、选择解决方案-右键单击-添加新建项目 三、点击下一步-创建 项目名称可以修改 位置不要改  四、新建文件夹(与原存放资源的文件夹同名) 五、添加文件 六、将原项目的资源文件(图片和音频)添加   七、对Application Folder右键单击-Add-项目输出   保

    2024年02月04日
    浏览(34)
  • VS Code 配置 Vue3 模板 详细步骤

    1、打开 VS Code ,在页面左下角找到这个设置图标,然后找到 “用户代码片段”   2、接着点击 “新建全局代码片段文件”  3、在输入框中输入你要设置的模板名,然后回车确认 4、接下来配置自己想要模板代码,或者也可以借鉴我写的这个,具体根据自己的需求来配置 5、接

    2024年01月15日
    浏览(42)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包