页面路由

每个页面路由，是一个对象{ }，对象里面有很多属性，这些属性有不同的功能。

多个这些对象组成了Vue Router 路由，见Vue-Vue Router 路由

=======================

路由路径 path

表示访问的路径，比如你的网站基本路径是www.baidu.com，那么下面这个/home 表示用户访问 www.baidu.com/home，显示

1、动态路由

path:”/user/:id” 中，:id相当于告诉别人我这个id是动态的，通过to传进来。

如果你只访问 /user，现在是不显示东西的，必须访问/user/xxx才会显示user组件

id可以通过拼接的方式，在.vue组件里面动态给与

获取动态路由的值

查看Vue-Vue Router 路由
如上面的例子，通过route 的 params属性获得{ id : 123}

2、路由匹配

没有匹配到path的，会显示空，并提示警告，这样用户体验不好。

可以通过路由设置，假如没有匹配到任何页面，就显示404notfound页面。

如下图，把这个加入到const routes 里面，放在最后面，这样上面所有页面都匹配不上时，就会匹配这个404页面。
pathMatch( )参数是正则表达式，. 表示任意字符，*表示0个或多个字符

{
  path: "/:pathMatch(.*)",
  redirect:"/main"
}

到时候可以通过 route.pathMath 拿到后面输入的内容

如果后面加个*，可以把这些换成数组

{
  path: "/:pathMatch(.*)*",
  redirect:"/main"
}

组件 component

组件，就是这个路由路径path对应的是哪个组件。如下代码，就可以把路径/HelloWorld 和组件 HelloWorld对应起来，用户访问 xxx/HelloWorld，路面对应的页面就会跳转到组件HelloWorld

// router/index.js
import HelloWorld from '/@/views/HelloWorld.vue'
const routes = [
  { path: '/HelloWorld',name: 'HelloWorld', component: HelloWorld },
]

懒加载

如果是按上面的方式引入组件，那么外层页面加载时，会把HelloWorld页面资源也一起加载，此时HelloWorld并没有被访问，没访问的页面都一起加载进来，有点浪费，同时也影响外层的渲染速度。

我们希望用户访问HelloWorld的时候才加载HelloWorld的资源，因此可以通过懒加载实现。

只要把上面的代码改为，通过import函数引入组件，就是懒加载。

// router/index.js
// import HelloWorld from '/@/views/HelloWorld.vue'
const routes = [
  { path: '/HelloWorld',name: 'HelloWorld', component: ()=> import('/@/views/HelloWorld.vue') },
]

同时项目打包时，懒加载的组件会另外打包，不会和主文件打包在一起，需要用到时再读取对应组件的js文件。

如下图，HelloWorld的组件资源会额外打包成一个js文件，同时生成对应的映射文件.map

如果我们想知道哪个文件对应的是 HelloWorld 组件，可以在import函数里面添加魔法注释（webpack的特性，vuecli是基于webpack的，因此vuecli也可以）

这个注释是固定写法，到时候会根据 “名字” 来生成打包的名字

重定向 redirect

就是访问某个路径，可以设置自动跳转到其他路径去，就叫重定向（重新确定方向）
应用就比如网站默认的根路径 / ，重定向到其他路径上

自定义数据 meta

可以给这个路由自定义一些数据，到时候再.vue文件里面可以获取到这个自定义数据

命名路由 name

给路由命名，这样跳转的时候可以直接使用这个名字

// router/index.js
const routes = [
  {
    path: '/user/:username',
    name: 'user', // 命名
    component: User
  }
]

然后.vue文件里面跳转时，可以通过对象的方式，跳转到这个名字

<router-link :to="{ name: 'user', params: { username: 'erina' }}">
  User
</router-link>

或

router.push({ name: 'user', params: { username: 'erina' } })

子路由 children

嵌套路由

1、创建子路由

router文件夹内的index.js，用children 表示子页面

path无需写成/home/product，路由会自动帮我们加上，如果你这样写反而找不到路径

2、父组件页面设置标签和跳转

home组件，设置 区域，这个区域就会根据 的to属性跳转

也可以通过路由对象router 的方法跳转，可以查看 Vue Router - 路由跳转对象 router

===================

在页面中获取属性 route

说明

注意，route 和 router 不一样
route 是路由属性对象，显示页面的路由属性
router 是路由跳转对象，掌管跳转页面的方法

路由属性对象，是在.vue文件里面，获取当前路由的一些属性，如下，比如路径path、动态路由数据params、命名路由name等。

属性可以参考页面路由属性 Vue Router - 页面路由属性 route

用法

Vue router 3.X ，对应Vue 2.x

假设是一个Home.vue文件，可以通过this.$route.属性 获得route的属性，如下

<template>
  <div>{{$route.params.id}}</div>
</template>
<script>
export default {
  data(){
    return {
        path:this.$route.path // 显示 /user/why
    }
  },
}
</script>

下面是部分属性的解释：
$route.path 路径：显示当前激活的路由页面的路径，总是绝对路径

$route.params 路由参数，一个 key/value 对象，和动态路由相关，如果没有路由参数，就是一个空对象

$route.query URL 查询参数：一个 key/value 对象，表示 URL 查询参数。
例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。

$route.fullPath 完整路径和URL查询参数：完成解析后的 URL，包含查询参数和 hash 的完整路径。

$route.name 路由页面的名字：名字在index.js 文件里面设置路由参数和映射

$route.redirectedFrom 重定向页面的名字：如果存在重定向，即为重定向来源的路由的名字。

Vue router 4.X ，对应Vue3.x

要在setup( )内使用，相当于$route

<script>
  import { useRoute } from "vue-router"
  export default {
      setup(){
        const route = useRoute();
      // 通过 route.属性 获取里面的数据
      const path = route.path // 显示 /user/why
      return {
        path
      }
    }
  }
</script>