标签：enter stylus blog and ... class height active div
vue-route版本要跟vue版本同步，我的vue用的2.0+的，vue-router 也用了最新版2.1+
npm安装vue-router：
$ npm install vue-router --save-dev
使用：
1.引入 vue-router： import VueRouter from ‘vue-router‘;
2.注册： Vue.use(VueRouter);
3.配置路径：
const routes = [
{ path: ‘/goods‘, component: goods },
{ path: ‘/seller‘, component: seller },
{ path: ‘/ratings‘, component: ratings }
];
const router = new VueRouter({
linkActiveClass: ‘active‘,
routes: routes
});
4.初始化Vue（备注：
直接new Vue不赋值 需上面加上 /* eslint-disable no-new */注释
）：
/* eslint-disable no-new */
new Vue({
router: router,
...App
}).$mount(‘#app‘);
5.push进来第一个路径
router.push(‘/goods‘);
main.js源码：
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 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/ratings/ratings‘; Vue.use(VueRouter); const routes = [ { path: ‘/goods‘, component: goods }, { path: ‘/seller‘, component: seller }, { path: ‘/ratings‘, component: ratings } ]; const router = new VueRouter({ linkActiveClass: ‘active‘, routes: routes }); /* eslint-disable no-new */ new Vue({ router: router, ...App }).$mount(‘#app‘); router.push(‘/goods‘);
1. 定义路由链接： <router-link to="/goods">商品</router-link>
2. 路由匹配到的组件将渲染在这里 <router-view></router-view>
App.vue 源码：
<template> <div> <v-header></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> import header from ‘./components/header/header‘; export default { components: { ‘v-header‘: header } }; </script> <style lang="stylus" rel="stylesheet/stylus"> .tab font-size: 28px display: flex .tab-item height: 40px line-height: 40px text-align: center flex: 1 </style>
vueJs+webpack单页面应用--vue-router配置
标签：enter stylus blog and ... class height active div
原文地址：http://www.cnblogs.com/juexin/p/6180579.html
