Vue2.0 實戰項目(四) Vue-router
阿新 • • 發佈:2017-06-10
手動安裝 url ive ade const lin nts pre scrip
Vue-router
本次實戰項目所使用的Vue-router版本是2.3.1
首先在main.js中引入Vue-router,
import Vue from ‘vue‘; import Router from ‘vue-router‘; //如果在一個模塊化工程中使用它,必須要通過 Vue.use() 明確地安裝路由功能: //如果使用全局的 script 標簽,則無須如此(手動安裝)。 Vue.use(Router); //定義路由 const routes = [ {path: ‘/goods‘, component: goods}, {path: ‘/seller‘, component: seller}, {path:‘/ratings‘, component: ratings} ]; //創建 router 實例,然後傳 `routes` 配置 const router = new Router({ routes, linkActiveClass: ‘active‘ }); //router.push(location)等同於<router-link :to="...">,可以導航到不同的 URL router.push({path: ‘/goods‘}); //關閉生產模式下給出的提示 Vue.config.productionTip = false; /* 創建和掛載根實例。 記得要通過 router 配置參數註入路由, 從而讓整個應用都有路由功能*/ /* eslint-disable no-new */ new Vue({ el: ‘#app‘, router, template: ‘<App/>‘, components: {App} });
App.vue文件在template中使用 router-link 組件來導航
<template> <div id="app"> <v-header :seller="seller"></v-header> <div class="tab"> <div class="tab-item border-1px"> <!-- 使用 router-link 組件來導航. --> <!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 --> <router-link to="/goods">商品</router-link> </div> <div class="tab-item"> <router-link to="/ratings">評論</router-link> </div> <div class="tab-item"> <router-link to="/seller">商家</router-link> </div> </div> <!-- 路由出口 --> <!-- 路由匹配到的組件將渲染在這裏 --> <router-view></router-view> </div> </template>
Vue2.0 實戰項目(四) Vue-router