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 } }) 来传递参数了。
