Vuejs+webpack single page Application--vue-router configuration

Vue-route version to be synchronized with Vue version, my Vue with the 2.0+, Vue-router also used the latest version 2.1+

NPM installation Vue-router:

$ NPM Install Vue-router--save-dev

Use:

1. Introduction of Vue-router:import Vuerouter from ' vue-router ';

2. Registration: Vue.use (vuerouter);

3. Configure the path:

Const ROUTES = [
  {path: '/goods ', component:goods},
  {path: '/seller ', Component:seller},
  {path: '/ratings ', component:ratings}
];

Const ROUTER = new Vuerouter ({
  Linkactiveclass: ' Active ',
  Routes:routes
});

4. Initialize Vue (Note:

Direct new Vue does not have to be assigned a value above plus/* eslint-disable no-new */Comment

）：

/* eslint-disable No-new */
New Vue ({
  Router:router,
  ... App
}). $mount (' #app ');

5.push comes in first path

Router.push ('/goods ');

Main.js Source:

//The Vue build version to load with the ' Import ' command//(runtime-only or standalone) has the been set in the 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=NewVuerouter ({linkactiveclass:' Active ', routes:routes});/*eslint-disable no-new*/NewVue ({router:router, ... APP}). $mount (' #app '); Router.push ('/goods ');

1. Define routing Links: <router-link to= "/goods" > Products </router-link>

2. The component that the route matches to will be rendered here <router-view></router-view>

App.vue Source:

<Template>  <Div>    <V-header></V-header>    <Divclass= "tab">      <Divclass= "Tab-item">        <Router-link to= "/goods">Commodity</Router-link>      </Div>      <Divclass= "Tab-item">        <Router-link to= "/ratings">Comments</Router-link>      </Div>      <Divclass= "Tab-item">        <Router-link to= "/seller">Business</Router-link>      </Div>    </Div>    <!--The components that the route matches to will be rendered here -    <Router-view></Router-view>  </Div></Template><Script>Import Header from'./components/header/header'; Exportdefault{components: {'V-header': Header}};</Script><styleLang= "Stylus"rel= "Stylesheet/stylus">. tab font-size:28px display:flex. Tab-item height:40px line-height:40px text-align:center flex:1< /c2></style>

Vuejs+webpack single page Application--vue-router configuration