依賴: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>