vueJs+webpack單頁面應用--vue-router配置

標籤：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配置