webpack--vue-router

一、安装

cnpm install vue-router -S

　　

如果在一个模块化工程中使用它，必须通过Vue.use()明确安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

　　

二、步骤

1、导入VueRouter包

import VueRouter from 'vue-router'

2、手动安装VUeRouter

Vue.use(VueRouter)

3、导入组件

import account from './main/Account.vue'
import goodsList from './main/GoodsList.vue'

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

4、创建路由对象

var router = new VueRouter({
    routes = [
       { path: '/account',  component:account}
    ]

})　　

5、子路由

routes:[
        // account   goodlist
        {
            path:'/account',
            component:account,
            children:[
                {
                    // 子路由path不带 / 
                    path:'login',
                    component:login
                },
                {
                    path:'register',
                    component:register
                }
            ]
        },
        {
            path:'/goodsList',
            component:goodsList
        }

　　

6、将路由挂载到vm上

var vm = new Vue({
    el:'#app',
    render: c => c(app),  // render 会把 el 指定的容器中，所有的内容都清空
                        //  所以不要把路由的router-view 和router-link直接写到el所控制的元素中
    router   // 4、将路由对象挂载都vm上
})

// 注意：App这个组件，是通过 vm 实例的render函数渲染出来的，render 函数如果要渲染组件，渲染

// 出来的组件只能放到el:'#app'做指定的元素中去

// account  和 goodslist 组件是通过路由匹配的监听的，所以这两个组件只能展示到属于路由的<router-view></router-view>中去