vue3:vue-router路由的使用_vue3 router

vueRouter路由总结-CSDN博客

目前前端流行的三大框架, 都有自己的路由实现:

        Angular的ngRouter

        React的ReactRouter

        Vue的vue-router

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得非常容易。

        目前Vue路由最新的版本是4.x版本。

vue-router是基于路由和组件的

        路由用于设定访问路径, 将路径和组件映射起来.

        在vue-router的单页面应用中, 页面的路径的改变就是组件的切换.

安装Vue Router：

npm install vue-router@4

路由的使用步骤

使用vue-router的步骤:

        第一步：创建路由组件的组件；

        第二步：配置路由映射: 组件和路径映射关系的routes数组；

        第三步：通过createRouter创建路由对象，并且传入routes和history模式；

        第四步：使用路由: 通过<router-link>和<router-view>；

 

 路由的默认路径

我们这里还有一个不太好的实现:

        默认情况下, 进入网站的首页, 我们希望<router-view>渲染首页的内容；

        但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以；

如何可以让路径默认跳到到首页, 并且<router-view>渲染首页组件呢?

 我们在routes中又配置了一个映射：

        path配置的是根路径: /

        redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了.

hash模式，网址中有#连接

history模式

另外一种选择的模式是history模式：

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载：

        如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会

更加高效；

        也可以提高首屏的渲染效率；

其实这里还是我们前面讲到过的webpack的分包知识，而Vue Router默认就支持动态来导入组件：

        这是因为component可以传入一个组件，也可以接收一个函数，该函数 需要放回一个Promise；

        而import函数就是返回一个Promise；

 打包效果分析

我们看一下打包后的效果：

我们会发现分包是没有一个很明确的名称的，其实webpack从3.x开始支持对分包进行命名（chunk name）：

路由其他属性

 name: 路由名字，路有记录独一无二的名字

meta：给路由配置一些自己的属性，自定义数据

const routes = [
  { 
    path: "/", 
    redirect: "/home" 
  },
  // /home/shops
  { 
    path: "/home", 
    name: "home", 
    component: () => import(/* webpackChunkName: "home-chunk" */"../pages/Home.vue"),
    meta: {
      name: "why",
      age: 18,
      height: 1.88
    },

动态路由基本匹配

很多时候我们需要将给定匹配模式的路由映射到同一个组件：

        例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但是用户的ID是不同的；

        在Vue Router中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数；

 

 在router-link中进行如下跳转：

 获取动态路由的值

那么在User中如何获取到对应的值呢？

        在template中，直接通过 $route.params获取值；

                在created中，通过 this.$route.params获取值；

                在setup中，我们要使用 vue-router库给我们提供的一个hook useRoute；

                        该Hook会返回一个Route对象，对象中保存着当前路由相关的值；

匹配多个参数

对于哪些没有匹配到的路由，我们通常会匹配到固定的某个页面

        比如NotFound的错误页面中，这个时候我们可编写一个动态路由用于匹配所有的页面；

{
    path: "/:pathMatch(.*)",
    component: () => import("../pages/NotFound.vue")
  }

这里还有另外一种写法：

        注意：我在/:pathMatch(.*)后面又加了一个 *；

 它们的区别在于解析的时候，是否解析 /：

 路由的嵌套

什么是路由的嵌套呢？

        目前我们匹配的Home、About、User等都属于底层路由，我们在它们之间可以来回进行切换；

        但是呢，我们Home页面本身，也可能会在多个组件之间来回切换：

比如Home中包括Product、Message，它们可以在Home内部来回切换；

        这个时候我们就需要使用嵌套路由，在Home中也使用 router-view 来占位之后需要渲染的组件；

 代码的页面跳转

有时候我们希望通过代码来完成页面的跳转，比如点击的是一个按钮：

 
    <button @click="jumpToAbout">关于</button>
    <button @click="forwardOneStep">前进一步</button>
 
<script>
    //在setup中编写的代码，那么我们可以通过 useRouter 来获取：
    import { useRouter } from 'vue-router'
 
    export default {
        name: 'App',
      methods: {
        jumpToAbout() {
          // router
         this.$router.push("/about")
        }
      },
      setup() {
        const router = useRouter();
 
        const jumpToAbout = () => {
          router.push("/about")
            //我们也可以传入一个对象，也可以添加参数
          router.push({
            path: "/about",
            query: {
              name: "why",
              age: 18
            }
          })
          router.replace("/about")
        }
        const forwardOneStep = () => {
      router.go(1)
      router.go(-1)
      router.forward()
      router.back()
    }
 
    return {
      jumpToAbout,
      forwardOneStep
    }
  }
}
</script>
        
    }
</script>

 我们也可以通过query的方式来传递参数：

 在界面中通过 $route.query 来获取参数：

 <h2>About: {{$route.query.name}}-{{$route.query.age}}</h2>

使用push的特点是压入一个新的页面，那么在用户点击返回时，上一个页面还可以回退，但是如果我们希望当前页面是一个替换操作，那么可以使用replace：

 页面的前进后退

router的go方法 

router也有back：

        通过调用 history.back() 回溯历史。相当于 router.go(-1)；

router也有forward：

        通过调用 history.forward() 在历史中前进。相当于 router.go(1)；