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