4、vue路由的配置
2017-03-24 本文已影响66人
夜幕小草
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>shell</title>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<link rel="stylesheet" type="text/css" href="static/css/reset.css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
man.js
import Vue from 'vue';
import App from './App';
import VueRouter from 'vue-router';
import Goods from './components/goods/Goods';
import Seller from './components/seller/Seller';
import Ratings from './components/star/Ratings';
Vue.config.productionTip = false;
Vue.use(VueRouter);
const routes = [
{ path: '/goods', component: Goods },
{ path: '/seller', component: Seller },
{ path: '/ratings', component: Ratings }
];
const router = new VueRouter({
routes
});
/* eslint-disable no-new */
new Vue({
router,
render: h => h(App)
}).$mount('#app');
App.vue
<template>
<div>
<v-header/>
<div class="tab">
<div class="tab-item">
<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>
<script type="text/ecmascript-6">
import Header from './components/header/Header';
// 注册Header
export default {
components: {
'v-header': Header
}
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
.tab
display: flex
width: 100%
height: 40px
line-height: 40px
.tab-item
flex: 1
text-align: center
</style>
路由官网
https://router.vuejs.org/zh-cn/essentials/getting-started.html
