前端路由

房东的流浪猫
134 阅读2分钟

1. 什么是路由

  • 就是一一对应关系的集合。
  • 前端路由（单页应用程序）:一个url地址，对应哪个组件
  • 后端路由:一个接口地址，对应哪一段接口地址

2.工作原理

  • 前端路由的本质, 对url的hash值进行改变和监听，切换对应页面组件的dom结构(不同的页面内容)
  • 根据地址栏变化（不重新向服务器发请求），去局部更新不同的页面内容，完成前端业务场景切换

3.思路

  1. URL 地址栏中的 Hash (就是锚点)值发生了变化
  2. 前端js监听了到 Hash 地址的变化 window.onhashchange=()=>{}
  3. 前端js把当前 Hash 地址对应的组件渲染都浏览器中 代码实例
                router/index.js
                
                // 导入路由插件
                import VueRouter from 'vue-router'
                import Vue from 'vue'

                // 使用插件 - 重要
                Vue.use(VueRouter)

                // 导入组件

                import Page1 from './Page1.vue'
                import Page2 from './Page2.vue'
                import Page3 from './Page3.vue'

                // 创建路由规则
                const router = new VueRouter({
                  routes: [
                    {
                      path: "/page1", // 当浏览器访问 http://localhost:8080/#/page1时，
                      component: Page1  // 装入组件 Page1
                    },
                    {
                      path: "/page2",
                      component: Page2
                    },
                    {
                      path: "/page3",
                      component: Page3
                    }
                  ]
                })
              //导出
                export default router

            main.js
            
            import router from './router/index.js'

            new Vue({
              router: router, // 使用路由
              render: h => h(App),
            }).$mount('#app')

            app.vue
            
            <router-view></router-view>

图例

Snipaste_2022-05-11_14-29-29.png

4.链接导航-router-link

  • 作用:用于提供路由链接,实现页面跳转
  • 语法:<router-link to="/xxx">跳转路径<router-link>
  • 要点:
            1.是vue-router提供的组件
            2.router-link最终会渲染成a链接
            3.routrt-link自带高亮效果
            router-link-exact-active 
            router-link-active

传参方式

  1. query:适用场景==>页面搜索
  2. params:适用场景==>详情页 query代码实例
            创建xxx.vue  准备接收路由上传递的参数和值
            <div>
                你要浏览的是: {{ $route.query.name }} {{$route.query.apiId}}
            </div>
            
            导航跳转, 传值给xxx.vue
            <li><router-link to="/api?name=xxx">xxx</router-link></li>
            <li><router-link to="/api/xxx">详情</router-link></li>
            

            路由定义
            {
                path: "/api",
                component: xxx组件名
              },
              {
                path: "/api/apiId",
                component: xxx组件名
              },

图例

Snipaste_2022-05-11_15-55-14.png

params代码实例

            创建xxx.vue  准备接收路由上传递的参数和值
            <div>
                你要浏览的是: {{ $route.params.name }} {{$route.params.apiId}}
            </div>
            
            导航跳转, 传值给xxx.vue
            <li><router-link to="/api?name=api/:name">xxx</router-link></li>
            <li><router-link to="/api/xxx/:name/:id">详情</router-link></li>


            路由定义
            {
                path: "/api/xxx",
                component: xxx组件名
              },
              {
                path: "/api/xxx/apiId",
                component: xxx组件名
              },

图例

Snipaste_2022-05-11_16-00-57.png

5.路由重定向

  • 定义:重定向， 用户访问的是A地址，系统把它切换到B地址。
  • 应用场景：改变默认访问页面的行为

代码实例

          当输入网址时,会默认跳到xxx页面
         const routes = [
          {
            path: "/",
            redirect: "/xxx" // 重定向
          }
         ]

6.路由404

  • 定义:统一处理异常地址：那些个正常配置的地址之外的地址。 代码实例
        import NotFound from "@/components/NotFound";
        const routes = [
          { // 当上面路由都不匹配, 匹配这个通配符, 显示NotFound页面
            path: "*",
            component: NotFound
          }
        ]

7.编程式导航

  • 定义:编程式导航 ====> 写代码的方式来让页面跳转 代码实例
        // 跳转页面不传参
        this.$router.push('/路由路径')
        this.$router.push({path: '路由路径'})
        this.$router.push({name: '路由名称'})

        // 跳转并query传参-方式1
        this.$router.push("/路由路径?参数1=值1&参数2=值2")
        // 跳转并query传参-方式2
        this.$router.push({
            path: "路由路径",
            query: {
                "参数1":值1,
                "参数2":值2
            }
        })

        // 跳转并params传参-方式1
        this.$router.push("/路由路径/值1/值2")
        // 跳转并params传参-方式2
        this.$router.push({
            name: "路由名称",
            params: {
                "参数1":值1,
                "参数2":值2
            }
        })


        // 后退
           $router.back()
           
       **** 代码中的name是在index.js中定义路由信息的一个编号(路径加参数太长了,找一个编号代替)
       
       index.js
       
       const  routes=[
       {
       path:'/',(host)
       name:'123',(编号)
       component:xxx(组件名)            
       } 
       ]

扩展:route与route与router的区别

  • 相同点:两个都是vue-router插件提供的功能
  • 不同点:
  • this.$route: 保存当前的路由信息,用做获取传递的参数
  • thsi.$router: 导出对象,提供路由相关的api

8.路由嵌套

  • 原理：router-view中再次包含router-view。
  • 背景：一个组件内部包含的业务还是很复杂，需要再次进行拆分。 代码实例
            routes:[
              {
                path: '/page1', 
                component: Page1, // 这个组件内部还有router-view
                children: [
                  {
                    path:'',  // path为空，表示当 #/page1时，显示 Page1组件+组件1
                    component: 组件1  // 
                  },
                  {
                    path:'/xx1', // path以/开头，表示当 #/xx1时，显示 Page1组件+组件2
                    component: 组件2
                  },
                   {
                    path:'xx2', // path以/开头，表示当 /page1/xx2时，显示 Page1组件+组件3
                    component: 组件3
                  }
avatar
文章
阅读
粉丝