Vue在webpack中使用vue-router

Vue在webpack中使用vue-router

先安裝Vue-router

npm i vue-router

vue-router官網

1. 導入路由模塊：

import VueRouter from 'vue-router'

1. 安裝路由模塊：

Vue.use(VueRouter);

1. 導入需要展示的組件:

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

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

1. 創建路由對象:

var router = new VueRouter({

  routes: [

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

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

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

  ]

});

1. 將路由對象，掛載到 Vue 實例上:

//導入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

});

1. 改造App.vue組件，在 template 中，添加router-link和router-view：

<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>

account.vue:

<template>
    <div>
        <h1>這是account組件</h1>

    </div>
</template>

<script></script>

<style>

</style>

goods.vue:

<template>
    <div>
        <h1>這是goods組件</h1>

    </div>
</template>

<script></script>

<style>

</style>