快捷導(dǎo)航

VUE項(xiàng)目中引入vue-router的詳細(xì)過(guò)程

更新時(shí)間：2023年05月17日 14:34:33 作者：前端mian

vue-router 也叫 vue 路由，根據(jù)不同的路徑，來(lái)執(zhí)行不同的組件，這篇文章主要介紹了VUE項(xiàng)目中引入vue-router,需要的朋友可以參考下

1、初識(shí) vue-router

vue-router 也叫 vue 路由，根據(jù)不同的路徑，來(lái)執(zhí)行不同的組件

2、安裝 vue-router

npm install vue-router

就會(huì)發(fā)現(xiàn)，在 package.json 文件中，增加了如下內(nèi)容：

"dependencies": {
  "vue-router": "^3.6.5"
},

表示安裝成功

3、引入 vue-router

1、router/index.js 文件

在 src 目錄下新建 router 目錄，并在 router 目錄下新建一個(gè) index.js 文件

src/router/index.js

文件內(nèi)容如下：

import Vue from 'vue'
import Router from 'vue-router'
import Demo1 from '../components/Demo1'
Vue.use(Router);
// 設(shè)置組件映射規(guī)則
const routes = [
    {
        path: "/",
        redirect: "/demo1"
    },
    {
        path: '/demo1',
        component: Demo1
    }, {
        path: '/demo2',
        component: (resolve) => require(['@/components/Demo2'], resolve)
    }
]
export default new Router({
    routes
})

可以通過(guò) redirect 來(lái)實(shí)現(xiàn)重定向，我們將默認(rèn)路由重定向到 demo1
展示了兩種組件引入方式：

1、import Demo1 from ‘…/components/Demo1’
2、component: (resolve) => require([‘@/components/Demo2’], resolve)

2、main.js 文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
    render: h => h(App),
    router
}).$mount('#app')

引入我們創(chuàng)建的 router/index.js 文件，并將它掛載到我們的 vue 實(shí)例上

3、App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <router-view/>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</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>

即根據(jù)路由映射出的組件將會(huì)在 router-view 標(biāo)簽內(nèi)展示

<router-view/>

4、Demo1.vue

<template>
  <div>這是 demo1.vue</div>
</template>
<script>
export default {
  name: "Demo1"
}
</script>
<style scoped>
</style>

4、訪問(wèn)路由

http://localhost:8080

在這里插入圖片描述

可以看到 Demo1.vue 組件被加載，路由也被重定向到：

http://localhost:8080/#/demo1

到此這篇關(guān)于VUE項(xiàng)目中引入vue-router的文章就介紹到這了,更多相關(guān)vue引入vue-router內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue項(xiàng)目中如何通過(guò)cdn引入資源并配置詳解
生產(chǎn)環(huán)境中將項(xiàng)目依賴的一些第三方包替換成通過(guò)cdn方式外部加載,而不是打包到 vender,對(duì)于提升應(yīng)用的加載、響應(yīng)速度很有意義,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中如何通過(guò)cdn引入資源并配置的相關(guān)資料,需要的朋友可以參考下
2022-06-06
輕松學(xué)Vue組件之單文件組件
一個(gè)組件相當(dāng)于是一個(gè)小模塊,它是html、css與js的集合體,可以用于描述頁(yè)面中的某個(gè)結(jié)構(gòu)(模塊),下面這篇文章主要給大家介紹了關(guān)于輕松學(xué)Vue組件之單文件組件的相關(guān)資料,需要的朋友可以參考下
2023-03-03
一篇文章告訴你Vue3指令是如何實(shí)現(xiàn)的
在計(jì)算機(jī)技術(shù)中,指令是由指令集架構(gòu)定義的單個(gè)的CPU操作,在更廣泛的意義上,“指令”可以是任何可執(zhí)行程序的元素的表述,例如字節(jié)碼,下面這篇文章主要給大家介紹了關(guān)于Vue3指令是如何實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下
2022-01-01
vue使用vuedraggable實(shí)現(xiàn)嵌套多層拖拽排序功能
這篇文章主要為大家詳細(xì)介紹了vue使用vuedraggable實(shí)現(xiàn)嵌套多層拖拽排序功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
vue實(shí)現(xiàn)導(dǎo)航欄效果(選中狀態(tài)刷新不消失)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)導(dǎo)航欄效果，選中狀態(tài)刷新不消失，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-12-12
vue基于elementUI表格狀態(tài)判斷展示方式
這篇文章主要介紹了vue基于elementUI表格狀態(tài)判斷展示方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue下拉菜單組件（含搜索）的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue下拉菜單組件（含搜索）的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-11-11
使用element-ui設(shè)置table組件寬度(width)為百分比
這篇文章主要介紹了使用element-ui設(shè)置table組件寬度(width)為百分比方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
VUE子組件的watch不被觸發(fā)問(wèn)題及解決
這篇文章主要介紹了VUE子組件的watch不被觸發(fā)問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
分分鐘學(xué)會(huì)vue中vuex的應(yīng)用（入門教程）
本篇文章主要介紹了vue中vuex的應(yīng)用（入門教程），詳細(xì)的介紹了vuex.js和應(yīng)用方法，有興趣的可以了解一下
2017-09-09