Vue在webpack中使用vue-router

import VueRouter from 'vue-router'

Vue.use(VueRouter);

import login from './components/account/login.vue'

import register from './components/account/register.vue'

var router = new VueRouter({

  routes: [

    { path: '/', redirect: '/login' },

    { path: '/login', component: login },

    { path: '/register', component: register }

  ]

});

//导入vue-router
import VueRouter from 'vue-router'

import  app from './App.vue'
import  account from './main/Account.vue'
import  goods from './main/Goods.vue'

Vue.use(VueRouter);

var router = new VueRouter({
    routers:[

        {path:'/account',component:account},
        {path:'/goods',component:goods},

    ]

});



var vm = new Vue({
    el:"#app",
    data:{
    },
    render:function (createElement) { //在webpack中如果需要vue放到页面中展示 vm实例中的render函数可以实现
        return createElement(app)
    },
    routers:router

});

<template>
    <div>
        <h1>这是 App 组件</h1>


        <router-link to="/account">Account</router-link>
        <router-link to="/goodslist">Goodslist</router-link>

        <router-view></router-view>
    </div>
</template>

<script>
</script>


<style>

</style>

<template>
    <div>
        <h1>这是account组件</h1>

    </div>
</template>

<script></script>

<style>

</style>

<template>
    <div>
        <h1>这是goods组件</h1>

    </div>
</template>

<script></script>

<style>

</style>