vueRouter

Vue 的路由系统类比为地图上的导航系统。在一座大城市中旅行，需要去不同的地方参观。路由系统就是指引你到达目的地的导航系统一样。

在 Vue 中，我们可以使用 Vue Router 来创建路由系统。Vue Router 通过帮助我们定义不同的页面（或称为路由），并在页面之间切换，使我们的应用程序可以具有多个页面和导航功能。

路由配置

使用 vue  ui  创建包含 vueRouter 的项目
路由配置文件目录 /src/router/index.js

基本配置

const routes = [
  {
    // 路由元信息，路由携带的信息标识
    meta:{
      title:"首页",
    },
    path: '/',  // 路由path路径，浏览器输入的地址
    name: 'home', // 路由的名称（别名）方便在js中触发路由
    component: Home   // 对应路由渲染的页面模板。可通过import 按需加载
  }
]

全局引入组件

import Home from "@/views/home"

组件按需加载

{
    meta:{
      title:"我的"
    },
    path:"/my",
    component:()=> import(/* webpackChunkName: "my" */ '../views/my.vue')
  }

路由模式

mode:"history"
mode 配置路由模式，默认hash 类型，路径包含#
配置history 后，去除路径中的 “#”

路由对象

$route

当前激活的路由的信息对象。每个对象都是局部的，可以获取当前路由的 path, name, params, query 等属性。

$router

全局的 router 实例。任何页面也都可以调用其 push()、 replace(),、go() 等方法。其中包含了很多属性和对象（比如 history 对象）

router-view

渲染router路由对应的模板内容
router-view 组件同级的 标签内容，会展示在任何一个页面

路由跳转

标签导航跳转

<router-link>

以标签的形式跳转页面，作用类似html中的a标签

js 编程式导航

$router.push(location)

用于将用户导航到不同的 URL 地址。参数可以是一个字符串路径，或者是一个包含路径的对象。例如：

// 字符串路径
this.$router.push('/home');
// 包含路径和查询参数的对象
this.$router.push({ path: '/home', query: { name: 'jerry' } })

$router.replace(location)

跟 $router.push() 类似，但是不会增加新的历史记录，而是替换当前的 URL。例如：

this.$router.replace('/home');

$router.go(n)

根据浏览器历史记录向前或向后跳转到指定步骤。例如：

this.$router.go(-1); // 向后跳转一步
this.$router.go(1); // 向前跳转一步

$router.back()

后退一步，这相当于 $router.go(-1)。例如：

this.$router.back();

$router.forward()

前进一步，这相当于 $router.go(1)。例如：

this.$router.forward();

路由传参

1. 动态路由传参

动态路由传参是通过在路由定义中使用动态路径参数，如/user/:id，其中:id就是一个参数。在组件中，可以通过$route.params.id来获取参数值。

定义路由：

{
  path: '/user/:id',
  name: 'user',
  component: User
}

传参示例：

this.$router.push({ name: 'user', params: { id: 123 } });

组件中接收参数：

export default {
  name: 'User',
  mounted () {
    console.log(this.$route.params.id); // 获取传递的id参数
  }
}

2. 查询参数传递

查询参数传递是通过在路由路径中传递参数，如/user?id=123。在组件中，可以通过$route.query.id来获取参数值。

定义路由：

{
  path: '/user',
  name: 'user',
  component: User
}

传参示例：

this.$router.push({ name: 'user', query: { id: 123 } });

组件中接收参数：

export default {
  name: 'User',
  mounted () {
    console.log(this.$route.query.id); // 获取传递的id参数
  }
}

3. 命名路由传参

通过命名路由传递参数时，可以直接调用$router.push({ name: 'user', params: { id: 123 } })或$router.push({ name: 'user', query: { id: 123 } })来传递参数。

在定义路由时，需要指定一个路由名称：

{
  path: '/user/:id',
  name: 'user',
  component: User
},
{
  path: '/user',
  name: 'user',
  component: User
}

然后就可以通过 $router.push({ name: 'user', params: { id: 123 } }) 或 $router.push({ name: 'user', query: { id: 123 } }) 来传递参数了。