webpack中使用vue-router

前提:安装了vue并且能正常使用

1.cnpm i vue-router -S安装包
2.在main.js文件中引入vue-router

import VueRouter from 'vue-router'
Vue.use(VueRouter)

3…在main.js引入路由页面

import account from './main/account.vue'
import goodlist from './main/GoodList.vue'

4.在main.js创建路由对象,并配置:

let router = new VueRouter({
    routes:[
        {path:'/account',compoent:account},
        {path:'/goodlist',compoent:goodlist}
    ]
})

5.将路由对象那个挂在到vm上

,
    router

6.将组件显示的位置放在主页面里面,可以实现点击切换显示:

	<router-link to="/account">Account</router-link>
    <router-link to="/goodlist">GoodList</router-link>

    <router-view></router-view>

实现路由嵌套(在组件里显示子组件)

1.创建两个子组件

2.在某个组件(account.vue)里放入显示子组件的位置:

<template>
    <div>
        <h1>这是account组件</h1>
        <router-link to="/account/login">登陆</router-link>
        <router-link to="/account/register">注册</router-link>
        <router-view></router-view>
    </div>
</template>

3.在mai.js中引入两个组件

import login from './subcom/login.vue'
import register from './subcom/register.vue'

在父组件的路由匹配规则里面添加children属性,然后书写两个子组件的匹配规则

{path:'/account',
            component:account,
            children:[
                {path:'login',component:login},
                {path:'register',component:register}
            ]
        },

5.实现效果