vueRooter的总结

这一周学习了Vue的脚手架的结构，最重要的router 该进行总结和回忆了。

1首先是router的安装，用npm命令npm install vue-router --save

2装完后，在main.js下导入import VueRouter from 'vue-router'

配置完成以后我们需要在Vue实例中引入它

3然后就是路由的使用和配置了：创建一个新的VUE组件，将组件导出，在index.js的文件下导入

const home = () =>import('../components/home')进行一个懒加载，使打包的js代码分开，再使用router

Vue.use(Router)

然后进行映射在routes中定义：

 

 {

      path:'/Profile',

      component:Profile

    }

 

最后在App.vue 组件中展示

 

 

并用

<router-view></router-view>展示

 

 

 

4路由嵌套的使用，就是在路由的子组件再添加路由

 

例如：home 下面的homenews

 

 

 

依然在index.js 进行一个导入

 

 

但此时的映射不再是在routes中，而是在home映射中进行映射用关键词children

 

 映射完之后也不再App.vue中显示，在home.vue 中

 

 此时一个子路由就完成了。需要注意的是  link的地址前要带父组件。