文章目录

• 1.多页面应用
• 2. 单页面应用（使用路由）
• 3. 多级路由

1.多页面应用

2. 单页面应用（使用路由）

（1）安装vue-router插件

• vue2 要安装 vue-router3
  npm i vue-router@3
• vu3 要安装 vue-router4
  npm i vue-router@4

（2）main.js 中引入并使用 vue-router
new Vue 时添加新的配置项：一旦使用了 vue-router 插件，在 new Vue 的时候可以添加一个全新的配置项：router

（4）router 路由器的创建一般放在一个独立的 js 文件中，例如：router/index.js

（5）编写router
【index.js】

（6）使用 router-link 标签代替 a 标签（App.vue 中）
【App.vue】

<router-view></router-view>为一个占位符，指定组件最终展示的位置。

（7）测试

3. 多级路由

子组件：【shijiazhuang.vue】

父组件：【hebei.vue】

路由【index.js】

注意：一般普通组件存放在components中，路由组件存放在pages中。