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

相关推荐