在vue-cli腳手架中配置一個(gè)vue-router前端路由
更新時(shí)間：2017年07月03日 12:02:51 作者：righten_Sun
這篇文章主要給大家介紹了在vue-cli腳手架中配置一個(gè)vue-router前端路由的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。
前言
這篇文章給大家講解的是在vue-cli腳手架中如何配置vue-router前端路由的相關(guān)內(nèi)容，分享出來供打擊參考學(xué)習(xí)，下面來一起看看詳細(xì)的介紹：
首先你需要一個(gè)main.js文件
//然后引入vue-router
import VueRouter from 'vue-router';
//使用路由
Vue.use(VueRouter);
//當(dāng)然如果需要有組件進(jìn)來的時(shí)候也是需要引入的
import Home from '../components/Home.vue';
import News from '../components/News.vue';
import List from '../components/List.vue';
//創(chuàng)建路由實(shí)例
const router = new VueRouter({
routes: [
{path:'/home',component:Home},
//path:路徑 component:把你需要的組件掛載進(jìn)來
{
path:'/news',
component:News,
//當(dāng)你需要嵌套路由的時(shí)候你可以這么做
//children子路由,接下來的json中的內(nèi)容還是一樣的,需要有最基本的path和component
children:[
{path:'/news/list',component:List}
]
},
{path:'*',redirect:'/home'} //404
//當(dāng)路徑錯(cuò)誤或沒有這個(gè)路徑的時(shí)候我們會(huì)給予一個(gè)默認(rèn)路徑
]
});
//最后掛在到vue實(shí)例上
new Vue({
router,
el: '#app',
render: h => h(App)
})
html代碼樣式
<router-link to="/home">主頁</router-link> <router-link to="/news">新聞</router-link> <router-link to="/news/list">列表</router-link> <router-view></router-view>
這樣一個(gè)最基本的Vue前端路由就完成了!!!
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
詳解如何編寫一個(gè)Vue3響應(yīng)式系統(tǒng)
這篇文章主要為大家學(xué)習(xí)介紹了如何編寫一個(gè)Vue3響應(yīng)式系統(tǒng)，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，感興趣的小伙伴可以了解一下2023-07-07
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)時(shí)間軸功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
一般在vue項(xiàng)目開發(fā)中，事件的處理邏輯一般很復(fù)雜，我們可以將處理的邏輯變成函數(shù)，在vue開發(fā)中，一般使用的是使用的是v-on指令進(jìn)行事件的監(jiān)聽，事件監(jiān)聽的過程中觸發(fā)相應(yīng)的JavaScript代碼2022-08-08
Vue3時(shí)間軸組件問題記錄(時(shí)間信息收集組件)
本文介紹了如何在Vue3項(xiàng)目中封裝一個(gè)時(shí)間信息收集組件,采用雙向綁定響應(yīng)式數(shù)據(jù),通過對Element-Plus的Slider組件二次封裝,實(shí)現(xiàn)時(shí)間軸功能,解決了小數(shù)計(jì)算導(dǎo)致匹配問題和v-model綁定組件無效問題,感興趣的朋友跟隨小編一起看看吧2024-09-09
前端vue項(xiàng)目如何使用Decimal.js做加減乘除求余運(yùn)算
decimal.js是使用的二進(jìn)制來計(jì)算的,可以更好地實(shí)現(xiàn)格化式數(shù)學(xué)運(yùn)算,對數(shù)字進(jìn)行高精度處理,使用decimal類型處理數(shù)據(jù)可以保證數(shù)據(jù)計(jì)算更為精確,這篇文章主要給大家介紹了關(guān)于前端vue項(xiàng)目如何使用Decimal.js做加減乘除求余運(yùn)算的相關(guān)資料,需要的朋友可以參考下2024-05-05
koa2+vue實(shí)現(xiàn)登陸及登錄狀態(tài)判斷
這篇文章主要介紹了koa2+vue實(shí)現(xiàn)登陸及登錄狀態(tài)判斷，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-08-08
vue 實(shí)現(xiàn)移動(dòng)端鍵盤搜索事件監(jiān)聽
今天小編就為大家分享一篇vue 實(shí)現(xiàn)移動(dòng)端鍵盤搜索事件監(jiān)聽，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家學(xué)習(xí)介紹了Vue3中局部組件和全局組件的使用方法，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，需要的小伙伴可以學(xué)習(xí)一下2023-07-07
這篇文章主要給大家分享了 vue中install方法介紹，vue提供install可供我們開發(fā)新的插件及全局注冊組件等，感興趣的小伙伴請和小編一起進(jìn)入文章了解具體內(nèi)容吧2021-11-11
組件是有name屬性的,匹配的就是組件的name,下面這篇文章主要給大家介紹了關(guān)于vue中組件的name屬性含義和用法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12