web前端day8--vue-router&子路由&路由抽离

vue-loader

如何在webpack中使用vue-loader呢
1在main.js.导包中

import VueRouter from 'vue-loader'

当然前提你得安装先。
2.手动安装VueRouter,也是在main.js

Vue.use(VueRouter)

这里的也是导入的vue.js的对象

3.创建路由对象

4.挂载路由

注意：
router-view写到app组件中去，不要写道id=app的div中去，因为render渲染的组件会覆盖掉根元素。

children router

和之前写法没什么区别，只需要多一步导入子组件。

vue 组件中的style

scoped 属性

限定样式作用域为此组件

lang属性

指定写样式的语言

抽离路由模块

当我们在main.js中写入太多的路由时会显得很复杂，这个时候可以把属于路由的部分给单独写一个router.js,然后通过之前的 export default 把router对象暴露出去，然后再在main.js中导入router对象。