在webpack构建的项目中使用vue-router

在webpack构建的项目中使用vue-router

1.npm i vue-router -S

2.修改main.js

步骤写在注释中

main.js:

import Vue from 'vue'
//1.导入vuerouter包
import VueRouter from 'vue-router'
//2.手动安装包
Vue.use(VueRouter)

//4.导入路由组件
import Account from "./main/Account.vue";
import GoodsList from "./main/GoodsList.vue";

import App from './App.vue'
//3.创建路由对象
let router=new VueRouter({
    routes:[
        {path:'/account',component:Account},
        {path: '/goodsList',component:GoodsList}
    ]
})

let vm=new Vue({
    el:"#app",
    render:c=>c(App),
    router//5.将路由对象挂载到vm上
})

App.vue:

<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>
    export default {
        name: "App"
    }
</script>

<style scoped>

</style>

GoodList.vue:

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

<script>
    export default {
        name: "GoodsList"
    }
</script>

<style scoped>

</style>

Account.vue:

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

<script>
    export default {
        name: "Account"
    }
</script>

<style scoped>

</style>

三、路由嵌套

和普通的路由相似，唯一注意的是，子路由的路径不要加/

let router=new VueRouter({
    routes:[
        {
            path:'/account',
            component:Account,
            children:[
                {path: 'login',component:Login},
                {path: 'register',component:Register}
            ]
        },
        {path: '/goodsList',component:GoodsList}
    ]
})