在vue-cli腳手架中配置一個(gè)vue-router前端路由
更新時(shí)間：2017年07月03日 12:02:51 作者：righten_Sun
這篇文章主要給大家介紹了在vue-cli腳手架中配置一個(gè)vue-router前端路由的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。
前言
這篇文章給大家講解的是在vue-cli腳手架中如何配置vue-router前端路由的相關(guān)內(nèi)容，分享出來(lái)供打擊參考學(xué)習(xí)，下面來(lái)一起看看詳細(xì)的介紹：
首先你需要一個(gè)main.js文件
//然后引入vue-router
import VueRouter from 'vue-router';
//使用路由
Vue.use(VueRouter);
//當(dāng)然如果需要有組件進(jìn)來(lái)的時(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)來(lái)
{
path:'/news',
component:News,
//當(dāng)你需要嵌套路由的時(shí)候你可以這么做
//children子路由,接下來(lái)的json中的內(nèi)容還是一樣的,需要有最基本的path和component
children:[
{path:'/news/list',component:List}
]
},
{path:'*',redirect:'/home'} //404
//當(dāng)路徑錯(cuò)誤或沒(méi)有這個(gè)路徑的時(shí)候我們會(huì)給予一個(gè)默認(rèn)路徑
]
});
//最后掛在到vue實(shí)例上
new Vue({
router,
el: '#app',
render: h => h(App)
})
html代碼樣式
<router-link to="/home">主頁(yè)</router-link> <router-link to="/news">新聞</router-link> <router-link to="/news/list">列表</router-link> <router-view></router-view>
這樣一個(gè)最基本的Vue前端路由就完成了!!!
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
這篇文章主要介紹了vue中button標(biāo)簽樣式和功能禁用的寫法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
關(guān)于vue中如何監(jiān)聽數(shù)組變化
這篇文章主要介紹了關(guān)于vue中如何監(jiān)聽數(shù)組變化，對(duì)vue感興趣的同學(xué)，必須得參考下2021-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)打卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
原始值指的是 Boolean、Number、BigInt、String、Symbol、undefined、null 等類型的值，在 JavaScript 中，原始值是按值傳遞的，引用類型是按引用傳遞的，這意味著，如果一個(gè)函數(shù)接收了一個(gè)原始值作為參數(shù)，那么形參和實(shí)參之間是沒(méi)有引用關(guān)系的，它們是完全獨(dú)立的兩個(gè)值2023-01-01
這篇文章主要介紹了vue如何向后臺(tái)傳遞日期，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
使用vue引入maptalks地圖及聚合效果的實(shí)現(xiàn)
這篇文章主要介紹了使用vue引入maptalks地圖及聚合效果的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
VUE屏幕整體滾動(dòng)(滑動(dòng)或滾輪)原生方法舉例
為了實(shí)現(xiàn)全屏滾動(dòng)效果,我們首先需要使用Vue.js框架搭建項(xiàng)目,這篇文章主要給大家介紹了關(guān)于VUE屏幕整體滾動(dòng)(滑動(dòng)或滾輪)原生方法的相關(guān)資料,需要的朋友可以參考下2024-01-01
vue element-ui里的table中表頭與表格出現(xiàn)錯(cuò)位的解決
這篇文章主要介紹了vue element-ui里的table中表頭與表格出現(xiàn)錯(cuò)位的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
本文為大家介紹Vue中路由的使用方法,包括安裝路由創(chuàng)建路由并導(dǎo)出以及在應(yīng)用實(shí)例中使用vue-router的相關(guān)知識(shí),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-02-02
Vue運(yùn)用transition實(shí)現(xiàn)過(guò)渡動(dòng)畫
vue的過(guò)渡動(dòng)畫，主要是transition標(biāo)簽的使用，配合css動(dòng)畫實(shí)現(xiàn)的。接下來(lái)通過(guò)本文給大家分享Vue運(yùn)用transition實(shí)現(xiàn)過(guò)渡動(dòng)畫效果，感興趣的朋友一起看看吧2019-05-05