Vue全掌握——路由

技术需求：

浏览器无论访问什么地址，访问的真实页面始终是index.html，vue根据不同的地址，渲染不同的组件。由于真实页面是唯一的，用户看到的页面切换，实际上是组件的切换，这种应用称之为单页应用

开发单页应用涉及到两个核心问题：
在哪个位置切换组件
访问路径如何对应组件

vue-router

使用vue-router可以非常轻松的构建单页应用程序
官网

路由模式：
hash：路径来自于地址栏中#后面的值，这种模式兼容性比较好（默认模式）
history：路径来自于真实的地址路径，旧浏览器不兼容
abstract：路径来自于内存

使用方法

路由配置文件：

1. 下载路由依赖

npm i vue-router

2. 导入依赖

import VueRouter from "vue-router";

3. 注册路由

Vue.use(VueRouter);

4. 创建路由对象

var router = new VueRouter({
  routes: [
    {
      path: "/",
      component: () => import("@/views/Home"),
    },
    {
      path: "/login",
      name: "login"	<!-- 命名可以方便后期修改，避免大面积改动项目 -->
      component: () => import("@/views/Login"),
    },
    {
      path: "/reg",
      component: () => import("@/views/Reg"),
    },
    {
      path: "/channel/:id",
      component: () => import("@/views/ChannelNews"),
    },
    {
      path: "*", //匹配所有路径
      component: () => import("@/views/NotFound"),
    },
  ],
  mode: "history",
};);

5. 导出路由对象

export default router;

注入到vue实例中全局可用：
6. 在main.js入口文件配置路由加载到Vue实例中（即全局可用）

import router from "./routers";

new Vue({
  render: (h) => h(App),
  router,       //配置路由到Vue实例中
}).$mount("#app");

7. 使用router-view自动根据路由渲染不同的组件

<template>
  <div id="app">
    <Header />
    <div class="container">
      <!-- 该组件会根据不同的访问路径，渲染不同的组件 -->
      <router-view></router-view>
    </div>
  </div>
</template>

8. 在链接或者其他触发路由写双标签router-link

<li><router-link to="login">登录</router-link></li>
或者
<li><router-link :to="{path: 'login'}">登录</router-link></li>
或者
<li><router-link :to="{name: 'login'}">登录</router-link></li>

详细代码参考

案例参考：gitee