vue2中路由的安装、搭建、配置的描述及重点代码

安装路由

• 安装组件在终端输入；npm i vue-router@3.5.3

    创建路由组件【一般放在views或pages文件夹】
    配置路由，配置完四个路由组件
  

• 路由组件的搭建

    -components 文件夹：放非路由组件（共用全局组件）
    -pages、views 文件夹：放路由组件
  

• 配置路由

  第一步：在src目录下创建router文件夹

  在router文件夹下创建index.js(在其中配置路由如下：)

            //配置路由
            import Vue from 'vue'
            import Router from 'vue-router'
  
            //使用插件
            Vue.use(Router);
  
            //引入路由组件
            import ZeroZero from '@/views/ZeroZero'
            import ZeroDemo from '@/views/CenterBody/ZeroDemo'
  
            //配置路由(此处展示的是二级路由，一级路由没有children)
            export default new Router({
                routes:[
                    //0.0直接显示“全部”
                    {
                        path:"/ZeroZero",
                        component:ZeroZero,
                        children:[
                            {
                                path:"/ZeroDemo",
                                component:ZeroDemo,
                            }
                        ]
                    },{.....},{.....},
                    //重定向，在项目跑起来的时候，访问/会跳转到ZeroZero
                    {
                        path:"*"
                        redirect:"/ZeroZero"
                    }
                ]
            })
  

  第二步：在main.js中配置

            //引入路由
            import router from '@/router/index.js'
  
            new Vue({
                render: h => h(App),
  
                // 注册路由（router是小写的）
                router
            }).$mount('#app')
  

  第三步：使用相关：

            App.vue 中路由组件的出口用 <router-view/>
  

  第四步：路由的两种导航

      1. 声明式导航：
             <router-link to="@/...">...</router-link>
         2. 编程式导航：(push/replace)
             除了能进行路由跳转还能做其他的业务逻辑（提交用户信息等）
             <button type="button" @click="goSearch">搜索🔍</button>
             methods:{
                 goSearch(){
                     this.$router.push("/search");
                 }
             }