【Vue】六:路由(上)使用路由 多级路由

文章目录

  • 1.多页面应用
  • 2. 单页面应用(使用路由)
  • 3. 多级路由

1.多页面应用

【Vue】六:路由(上)使用路由 多级路由_第1张图片
【Vue】六:路由(上)使用路由 多级路由_第2张图片
【Vue】六:路由(上)使用路由 多级路由_第3张图片

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
【Vue】六:路由(上)使用路由 多级路由_第4张图片

(4)router 路由器的创建一般放在一个独立的 js 文件中,例如:router/index.js
【Vue】六:路由(上)使用路由 多级路由_第5张图片
(5)编写router
【index.js】
【Vue】六:路由(上)使用路由 多级路由_第6张图片
(6)使用 router-link 标签代替 a 标签(App.vue 中)
【App.vue】
【Vue】六:路由(上)使用路由 多级路由_第7张图片

为一个占位符,指定组件最终展示的位置。

(7)测试
【Vue】六:路由(上)使用路由 多级路由_第8张图片

3. 多级路由

子组件:【shijiazhuang.vue】

【Vue】六:路由(上)使用路由 多级路由_第9张图片

父组件:【hebei.vue】

【Vue】六:路由(上)使用路由 多级路由_第10张图片
路由【index.js】

【Vue】六:路由(上)使用路由 多级路由_第11张图片

【Vue】六:路由(上)使用路由 多级路由_第12张图片
注意:一般普通组件存放在components中,路由组件存放在pages中。
【Vue】六:路由(上)使用路由 多级路由_第13张图片

你可能感兴趣的:(Vue,vue.js,javascript,前端)