路由

发布时间 2023-10-10 21:11:53作者: 嘎嘎鸭2

Vue 中路由:路径 和 组件 的映射关系,根据路由就能知道不同的路径应该匹配渲染哪个组件

VueRouter 作用:修改地址栏路径时,切换显示匹配的组件

 

VueRouter 的使用步骤:

1. 五个固定步骤:

① 下载 VueRouter 模块到当前工程,版本 3.6.5(Vue2 对应的版本是 VueRouter3.X,Vuex3.X;Vue3 对应的版本是 VueRouter4.X,Vuex4.X)

        npm  install  vue-router@3.6.5

② 引入: import  VueRouter  from  ' vue-router '  ( ② 到 ⑤ 全都在 main.js 里写 )

③ 安装注册:Vue.use ( VueRouter )

④ 创建路由对象:const  router  =  new  VueRouter ()

⑤ 注入,将路由对象注入到 new Vue 实例中,建立关联:

new  Vue ({

      render : h => h (App) ,

      router : router  // 后面的 router 要和第④步创建的对象名一致

}) . $mount ( ' #app ' )