1、Vue下載安裝步驟的詳細(xì)教程(親測(cè)有效) 1_水w的博客-CSDN博客
2、Vue下載安裝步驟的詳細(xì)教程(親測(cè)有效) 2 安裝與創(chuàng)建默認(rèn)項(xiàng)目_水w的博客-CSDN博客
3、基于vscode開(kāi)發(fā)vue項(xiàng)目的詳細(xì)步驟教程_水w的博客-CSDN博客
4、基于vscode開(kāi)發(fā)vue項(xiàng)目的詳細(xì)步驟教程 2 第三方圖標(biāo)庫(kù)FontAwesome_水w的博客-CSDN博客
5、基于vscode創(chuàng)建SpringBoot項(xiàng)目，連接postgresql數(shù)據(jù)庫(kù)_水w的博客-CSDN博客
6、基于vscode開(kāi)發(fā)vue項(xiàng)目，連接postgresql數(shù)據(jù)庫(kù) 3_水w的博客-CSDN博客
目錄
一、VueRouter
1、VueRouter安裝與使用
2、簡(jiǎn)單上手
（1）新建vue3項(xiàng)目
（2）單頁(yè)面演示
【1】App.vue
添加路由鏈接和路由填充位
【2】Discover.vue、Friends.vue、My.vue三個(gè)組件
【Vue】組件命名報(bào)錯(cuò) “Component name “XXX“ should always be multi-word”的解決方法
【3】Discover組件的子組件：TopList.vue、PlayList.vue
【4】配置前端路由 router/index.js
【5】配置main.js
（3）測(cè)試
一、VueRouter
Vue路由vue-router是官方的路由插件，能夠輕松的管理SPA項(xiàng)目中組件的切換。
- 它和vue.js是深度集成的，適合用于構(gòu)建單頁(yè)面應(yīng)用。Vue的單頁(yè)面應(yīng)用是基于路由和組件的，路由用于設(shè)定訪問(wèn)路徑，并將路徑和組件映射起來(lái)
- 這里的路由并不是指我們平時(shí)所說(shuō)的硬件路由器，這里的路由就是SPA（single page application單頁(yè)應(yīng)用）的路徑管理器。再通俗的說(shuō)，vue-router就是WebApp的鏈接路徑管理系統(tǒng)
- 路由實(shí)際上就是可以理解為指向，就是我在頁(yè)面上點(diǎn)擊一個(gè)按鈕需要跳轉(zhuǎn)到對(duì)應(yīng)的頁(yè)面，這就是路由跳轉(zhuǎn)
- vue-router 目前有3.x的版本和4.的版本，vue-router 3.x 只能結(jié)合 vue2進(jìn)行使用，vue-router 4.x 只能結(jié)合 Vue3 進(jìn)行使用
官方地址：入門(mén) | Vue Router
1、VueRouter安裝與使用
安裝命令：
npm install vue-router@4安裝成功后，前端項(xiàng)目中package.json會(huì)自動(dòng)注冊(cè)，?
2、簡(jiǎn)單上手
（1）新建vue3項(xiàng)目
新建一個(gè)Vue3項(xiàng)目，請(qǐng)移步到Vue下載安裝步驟的詳細(xì)教程(親測(cè)有效) 2 安裝與創(chuàng)建默認(rèn)項(xiàng)目_水w的博客-CSDN博客
?
下面將會(huì)以一個(gè)HTML單頁(yè)面演示Vue Router的基本使用步驟。在vue項(xiàng)目里也是一樣的原理。
（2）單頁(yè)面演示
目前的目錄結(jié)構(gòu)，如下所示：
【1】App.vue
當(dāng)前完整代碼：
<template>
<div>
<div id="app">
<!--聲明路由鏈接-->
<router-link to="/discover">發(fā)現(xiàn)</router-link>
<router-link to="/friends">關(guān)注</router-link>
<router-link to="/my">我的音樂(lè)</router-link>
<!--聲明路由占位符標(biāo)簽-->
<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>
添加路由鏈接和路由填充位
以下是一個(gè)vue提供的標(biāo)簽，默認(rèn)會(huì)被渲染為a標(biāo)簽。
- 其中有一個(gè)to屬性，這個(gè)to屬性會(huì)被渲染為href屬性，默認(rèn)值被渲染為 # 開(kāi)頭的hash地址。
- 簡(jiǎn)單來(lái)說(shuō)就是當(dāng)用戶(hù)點(diǎn)擊不同時(shí)跳轉(zhuǎn)不同內(nèi)容，而這個(gè)標(biāo)簽就是用戶(hù)要點(diǎn)擊的東西，相當(dāng)于a標(biāo)簽嘛。
下面這個(gè)標(biāo)簽叫路由填充位，就是說(shuō)未來(lái)通過(guò)我們的路由規(guī)則匹配到的組件，將會(huì)被渲染到 router-view所在位置。
- 簡(jiǎn)單來(lái)說(shuō)，就是用戶(hù)點(diǎn)擊路由鏈接，那得跳轉(zhuǎn)內(nèi)容吧，我們知道的是肯定不是整個(gè)頁(yè)面都跳轉(zhuǎn)，只是頁(yè)面內(nèi)相關(guān)的局部發(fā)生內(nèi)容改變，這個(gè)局部就是router-view所在顯示的區(qū)域。
【2】Discover.vue、Friends.vue、My.vue三個(gè)組件
（1）Discover.vue
<template>
<div>
<h1>發(fā)現(xiàn)</h1>
<!--聲明子路由鏈接-->
<router-link to="/toplist">推薦</router-link>
<router-link to="/playlist">歌單</router-link>
<hr>
<!--聲明子路由占位符標(biāo)簽-->
<router-view></router-view>
</div>
</template>
<script>
</script>
<style>
</style>（2）Friends.vue
<template>
<div>
<h1>關(guān)注</h1>
</div>
</template>
<script>
</script>
<style>
</style>（3）My.vue
<template>
<div>
<h1>我的音樂(lè)</h1>
<!--聲明路由鏈接-->
<router-link to="/book">書(shū)</router-link>
<router-link to="/music">音樂(lè)</router-link>
<!--聲明路由占位符標(biāo)簽-->
<router-view></router-view>
</div>
</template>
<script>
</script>
<style>
</style>【Vue】組件命名報(bào)錯(cuò) “Component name “XXX“ should always be multi-word”的解決方法
（1）第一種解決方法：修改組件名稱(chēng)為大駝峰，不要用系統(tǒng)中命令常見(jiàn)的名稱(chēng)。
（2）第二種解決方法：在根目錄下，打開(kāi)【.eslintrc.js】文件，如果沒(méi)有就新建，添加下列內(nèi)容
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中添加自定義規(guī)則 //關(guān)閉組件命名規(guī)則 "vue/multi-word-component-names":"off", }, overrides: [ { files: [ '**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)' ], env: { jest: true } } ] }注意：修改完，如果還不行，就退出VsCode，再重新打開(kāi)項(xiàng)目。
?
ok，問(wèn)題解決了。
【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 = [
//這里需要將根目錄默認(rèn)為Home，方便實(shí)現(xiàn)用戶(hù)在保持登錄 狀態(tài)下再次登錄時(shí)直接跳轉(zhuǎn)至主頁(yè)面
{
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屬性與組件的對(duì)應(yīng)關(guān)系
routes
})
// 需要導(dǎo)出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)
// // 配置請(qǐng)求根路徑
// axios.defaults.baseURL = 'http://localhost:8088'
// //將axios作為全局的自定義屬性，每個(gè)組件可以在內(nèi)部直接訪問(wèn)（Vue3），該部分要放在pp.mount('#app')的全面
// app.config.globalProperties.$http = axios
// app.use(ElementPlus)
app.use(router)
app.mount('#app')（3）測(cè)試
目前的目錄結(jié)構(gòu)，如下所示：
在瀏覽器打開(kāi)http://localhost:8080/進(jìn)行訪問(wèn)，效果如下圖所示：?
?
?
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-782289.html文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-782289.html
?
到了這里，關(guān)于基于vscode開(kāi)發(fā)vue3項(xiàng)目的詳細(xì)步驟教程 3 前端路由vue-router的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
