欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

手把手教你Vue3實(shí)現(xiàn)路由跳轉(zhuǎn)

 更新時(shí)間:2022年08月31日 16:17:20   作者:云胡同學(xué)  
Vue Router是Vue.js的官方路由器,它與Vue.js核心深度集成,使使用Vue.js構(gòu)建單頁應(yīng)用程序變得輕而易舉,下面這篇文章主要給大家介紹了關(guān)于Vue3實(shí)現(xiàn)路由跳轉(zhuǎn)的相關(guān)資料,需要的朋友可以參考下

一、安裝 vue-router

npm install vue-router@4

二、新建 vue 頁面

src 目錄下新建 view 目錄用來存放 vue 的頁面。

然后在 view目錄下新建兩個(gè) vue 頁面,分別是 login.vueregister.vue

2.1 login.vue

<template>
  <div>
    當(dāng)前是登錄頁面
  </div>
</template>

<script>
export default {
  name: "login"
}
</script>

<style scoped>
</style>

2.2 register.vue

<template>
  <div>
    當(dāng)前是注冊(cè)頁面
  </div>
</template>

<script>
export default {
  name: "register"
}
</script>

<style scoped>
</style>

三、新建路由文件

src 目錄下新建 router 目錄用來存放路由配置的頁面。

3.1 新建 index.js

在 router 目錄下新建 index.js 配置路由。

import {createRouter, createWebHistory} from 'vue-router'
import routes from './routes'    // 導(dǎo)入 router 目錄下的 router.js

const router = createRouter({
	history: createWebHistory(process.env.BASE_URL),
	routes
})
export default router;

目前 routes 里面還沒有路由路徑等內(nèi)容,因此我們要再新建一個(gè) routes.js文件。

3.2 新建 routes.js

還是在 router 目錄下新建 routes.js

import Register from '@/view/register.vue'
import Login from '@/view/login.vue'

const routes = [
    {
        name: 'login',
        path: '/login',
        component: Login
    },
    {
        name: 'register',
        path: '/register',
        component: Register
    }
];
export default routes

導(dǎo)入剛剛新建的 vue 頁面,然后和 path 綁定在一塊。

四、在 App.vue 中配置路由的跳轉(zhuǎn)

<template>
<div id = "app">
	<p>
	  <el-button>
            <router-link to="/login">登錄</router-link>
	  </el-button>
          
	  <el-button>
            <router-link to="/register">注冊(cè)</router-link>
	  </el-button>
	</p>
	<router-view/>
	</div>
</template>

<script>
// App.vue 的名稱叫 app
    export default {
        name: 'app'
    }
</script>

注意要使用 router-link 標(biāo)簽來進(jìn)行路由的跳轉(zhuǎn)。

el-button是這邊 Element UI框架的控件,如果沒安裝,可以不使用。

五、在 main.js 中 use 路由

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router/index' // 加載 router 底下的 index.js 路由配置文件

const app = createApp(App)
app.use(router)		
app.use(ElementPlus) // 沒安裝 Element UI 可以不用
app.mount('#app')

六、src 目錄結(jié)構(gòu)

src
│  App.vue
│  main.js
│      
├─router
│      index.js
│      routes.js
│      
└─view
        login.vue
        register.vue

七、結(jié)果

7.1 默認(rèn)頁面

7.2 點(diǎn)擊登錄

7.3 點(diǎn)擊注冊(cè)

總結(jié)

到此這篇關(guān)于Vue3實(shí)現(xiàn)路由跳轉(zhuǎn)的文章就介紹到這了,更多相關(guān)Vue3路由跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue3.2.x中的小技巧及注意事項(xiàng)總結(jié)

    Vue3.2.x中的小技巧及注意事項(xiàng)總結(jié)

    Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架,是目前最火的前端框架之一,是前端工程師的必備技能,下面這篇文章主要給大家介紹了關(guān)于Vue3.2.x中的小技巧及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下
    2022-04-04
  • Vue js with語句原理及用法解析

    Vue js with語句原理及用法解析

    這篇文章主要介紹了Vue js with語句原理及用法解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-09-09
  • 解決Vue使用bus總線時(shí),第一次路由跳轉(zhuǎn)時(shí)數(shù)據(jù)沒成功傳遞問題

    解決Vue使用bus總線時(shí),第一次路由跳轉(zhuǎn)時(shí)數(shù)據(jù)沒成功傳遞問題

    這篇文章主要介紹了解決Vue使用bus總線時(shí),第一次路由跳轉(zhuǎn)時(shí)數(shù)據(jù)沒成功傳遞問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • 詳解如何制作并發(fā)布一個(gè)vue的組件的npm包

    詳解如何制作并發(fā)布一個(gè)vue的組件的npm包

    這篇文章主要介紹了詳解如何制作并發(fā)布一個(gè)vue的組件的npm包,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-11-11
  • Vue的指令中實(shí)現(xiàn)傳遞更多參數(shù)

    Vue的指令中實(shí)現(xiàn)傳遞更多參數(shù)

    這篇文章主要介紹了Vue的指令中實(shí)現(xiàn)傳遞更多參數(shù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • vue插件實(shí)現(xiàn)v-model功能

    vue插件實(shí)現(xiàn)v-model功能

    最近在開發(fā)自己的富文本編輯器插件,在開發(fā)中遇到了很多問題其中我覺得比較好的問題就是在你定義的插件中實(shí)現(xiàn)雙向綁定。這篇文章主要介紹了vue插件實(shí)現(xiàn)v-model功能,需要的朋友可以參考下
    2018-09-09
  • Vue.js學(xué)習(xí)之計(jì)算屬性

    Vue.js學(xué)習(xí)之計(jì)算屬性

    Vue.js 的內(nèi)聯(lián)表達(dá)式非常方便,但它最合適的使用場(chǎng)景是簡(jiǎn)單的布爾操作或字符串拼接。如果涉及更復(fù)雜的邏輯,你應(yīng)該使用計(jì)算屬性。下面這篇文章主要給大家介紹了Vue.js中的計(jì)算屬性,需要的朋友可以參考借鑒,一起來看看吧。
    2017-01-01
  • 解決vue數(shù)組中對(duì)象屬性變化頁面不渲染問題

    解決vue數(shù)組中對(duì)象屬性變化頁面不渲染問題

    今天小編就為大家分享一篇解決vue數(shù)組中對(duì)象屬性變化頁面不渲染問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • Vue中如何合并el-table第一列相同數(shù)據(jù)

    Vue中如何合并el-table第一列相同數(shù)據(jù)

    這篇文章主要介紹了Vue中如何合并el-table第一列相同數(shù)據(jù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • Vue v-for循環(huán)之@click點(diǎn)擊事件獲取元素示例

    Vue v-for循環(huán)之@click點(diǎn)擊事件獲取元素示例

    今天小編就為大家分享一篇Vue v-for循環(huán)之@click點(diǎn)擊事件獲取元素示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11

最新評(píng)論