路由

1 如何在webpack中使用路由？
1 首先在webpack项目中安装vue-router

npm i vue-router -D

2 在main.js中导入vue-router 包并通过Vue.use()明确的安装路由功能

import VueRouter from ‘vue-router’
Vue.use(VueRouter)

3,新建几个子组件，并在main.js中导入，如创建两个组件：Account.vue和Goodlist.vue,并导入这两个子组件

import goodlist from ‘./Goodlist.vue’
import account from ‘./Account.vue’

4，创建router 实例，并在其中配置路由信息
var router = new VueRouter({
routes:[
{path:’/account’,component:account
},
{path:’/goodlist’,component:goodlist}

]
})
5 .然后将创建的router实例挂载到vue实例vm中去

var vm = new Vue({
el:’#app’,
data(){
return {
}
},
method:{
},
render: c => c(app),
router //将路由对象挂载到vm上
})

6，在创建的app.vue中引用创建的account.vue和goodlist.vue组件

这是一个app组件

account goodlist

7，运行，截图如图所示

注意:app这个组件是通过vm实例的render函数渲染出来的，render函数如果要渲染组件，渲染出来的组件，只能放到el所指 的元素中；account和gooodlist组件，是通过路由匹配监听到的，所以，这两个组件只能展示到属于路由的 中去

2，如何实现children 子路由？
1，新建两个login.vue 和register.vue两个文件，然后在account.vue中引用这两个子组件

这是account组件

登陆子组件 注册子组件

2，在main.js中导入login.vue和register.vue，并在router配置文件下的account中配置子路由信息

import login from ‘./login.vue’
import register from ‘./register.vue’

var router = new VueRouter({
routes:[
{path:’/account’,
component:account,
children:[
{path:’/login’,component:login},
{path:’/register’,component:register}
]
},
{path:’/goodlist’,component:goodlist}
]
})

3 如何抽离路由模块？
由于路由模块在main.js中代码量比较庞大，所以我们就考虑将路由模块单独抽离出来，以下是路由抽离的大致步骤：
1，新建一个router.js文件，然后从main.js中将路由部分的代码都剪切到router.js中

import goodlist from ‘./Goodlist.vue’
import account from ‘./Account.vue’
import login from ‘./login.vue’
import register from ‘./register.vue’
import VueRouter from ‘vue-router’
import Vue from ‘vue’
Vue.use(VueRouter)

var router = new VueRouter({
routes:[
{path:’/account’,component:account,
children:[
{path:’/login’,component:login},
{path:’/register’,component:register}
]

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

]

})

2，由于项目的入口文件是main.js，因此其他js文件需要在main.js中被调用，这就需要其他文件将自己暴露出来，在router.js中通过export default 将自己暴露出去

export default router

3，在main.js中引入router.js文件，同时也需要在vm 实例中挂载router

import router from ‘./router.js’
var vm = new Vue({
el:’#app’,
data(){
return {
}
},
method:{
},
render: c => c(app),
router/将路由对象挂载到vm上
})