一.路由概念

路由的本质就是一种对应关系（此处的路由含义同之前nodejs的路由），根据不同的URL请求，返回对应不同的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。

路由分为：后端路由和前端路由

后端路由：由服务器端进行实现并实现资源映射分发（nodejs、jsp、php等）

• 概念：根据不同的用户URL请求，返回不同的内容（地址与资源产生对应关系）
  

• 本质：URL请求地址与服务器资源之间的对应关系（映射）
  

前端路由：根据不同的事件来显示不同的页面内容，是事件与事件处理函数之间的对应关系

• 概念：根据不同的用户事件，显示不同的页面内容（地址与事件产生对应关系）
  

• 本质：用户事件与事件处理函数之间的对应关系
  

二.路由配置

1. 基本配置

{
    path: '/',//配置的地址, 
    alias:["/index","main"],//别名，在地址栏输入index或者main都可以跳转到/的页面
    name: 'home',//可省略不写
    component: HomeView,//配置的页面组件
  },

2. 传参

{
    path: '/produce/:id',//id是自定的参数（形参）
    name: 'produce',
    component: ProduceView
    // component: () => import("../views/ProduceView.vue"),
  },

3. 子路由

{
    path: '/admin',
    name: 'admin',
    component: () => import("../views/admin/AdminView.vue"),
    children: [
      {
        path: "dash",
        name: "dash",
        component: () => import("../views/admin/DashView.vue"),
      },
      {
        path: "event",
        name: "event",
        component: () => import("../views/admin/EventView.vue"),
      },
      {
        path: "",
        redirect: "dash",//如果子path为空，重定向到dash页面
      },
    ]
  },

4. 404

//在最后面配置404
  {
    path: "*",//path的值为*
    name: "nomatch",
    component: () => import("../views/NoMatch.vue"),
  },

三.路由方法

• $router.push：跳转并添加一个历史记录
• $router.replace：跳转替换（不留历史记录）
• .back（）：返回
• .forward（）：前进
• .go（-1）：返回一步
• .go（1）：前进一步