vueRouter基础

VueRouter

Vue Router 是 Vue.js 官方的路由管理器，简单理解可做vue项目导航

一、安装（搭建vue-cli时会选择然后默认配置好）

npm install vue-router

二、使用

1、非vue-cli中使用路由

（1）html头文件中引入vue.js和vue-router.js

（2）html页面布局

（3）js中配置路由

 

2、在vue-cli中使用路由

（1）在main.js文件中引入并注入vuerouter

（2）在src文件夹下面有个router文件夹，index.js用来存放路由配置信息

（3）index.js存放内容如下（引入VueRouter，使用VueRouter，创建VueRouter）

（4）组件中使用路由

将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。

两大关键：router-link，router-view

router-link：相当于html中的a标签，指定路由跳转的路径

<router-link to:' 跳转路径'></router-link>

router-view:用来承载跳转后的页面

如上图所示：nav作为公共组件，将其他跳转页面作为子项配置进路由。