VUE動態路由+請求數據演示新聞列表及詳情頁


依賴:vue-resource   vue-router

准備:在項目目錄下安裝好上面兩個插件

1、在main.js中引入vue-resource   vue-router

import VueResource from 'vue-resource';

import VueRouter from 'vue-router';

2、在main.js中引入將用到的組件

import News from './components/news.vue';

import Content from '.components/content.vue';

3、在main.js中配置路由

const routes = [

{path:'/news/:aid',component:News},

{path:'/content',component:Content},

{path:'*',redirect:News} //默認路由指向

]

4、實例化

const router = new VueRouter({

  routes;//  縮寫routes:routes

});

 

5、在main.js中 掛載路由

new Vue({

  el:'#app',

  router,

  render:h => h(App)

})

6、在App.vue中添加 <router-view></router-view>

7、使用路由

<!--使用路由引入組件-->
<router-link to="/news">新聞</router-link>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM