vue-router配置
阿新 • • 發佈：2018-04-10
use 配置 main fault UC 文件中 路由 使用 lin
首先在App.vue中
1.使用router-link組件來導航，通過‘to‘屬性指定鏈接，<router-link> 默認會被渲染成一個 `<a>` 標簽
<router-link class="tab-item" to="/goods">商品</router-link> <router-link class="tab-item" to="/ratings">評論</router-link> <router-link class="tab-item" to="/seller">商家</router-link>
2. 路由出口 ，路由匹配到的組件將渲染在這裏
<router-view></router-view>
其次在router文件中的index.js中
1.引入vue和vue-router,並且引入各個組件
import Vue from ‘vue‘ import Router from ‘vue-router‘ import Goods from ‘../components/goods/goods‘ import Seller from ‘../components/seller/seller‘ import Ratings from ‘../components/ratings/ratings‘
2.調用Vue.use()
Vue.use(Router)
3.配置路由
export default new Router({ routes: [ { path: ‘/‘, component: Goods }, { path: ‘/goods‘, component: Goods }, { path: ‘/seller‘, component: Seller }, { path: ‘/ratings‘, component: Ratings } ] })
然後在main.js中，引入vue App以及router 啟動Vue實例 掛載到#app上，註入路由器,進行渲染
import Vue from ‘vue‘ import App from ‘./App‘ import router from ‘./router‘ Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: ‘#app‘, router, render: h => h(App) })
vue-router配置