vue学习之------vue-router入门

单页面应用的路由原理：

单页面应用的整个项目只存在一个HTML文件，页面的切换 本质上 是 组件的切换；

所以，路由的作用是将组件与相应的URL路径相对应；

因为是单页面应用，所以，跳转页面时，既要让URL发生变化，又不能重新加载项目的HTML文件

 

hash模式：

利用web网页的锚点技术，在原有URL路径后添加【 /#/"随便什么名字"】

页面通过监听hash值的变化，切换显示不同的组件

history模式：

也是通过重写URL来实现路径与当前组件相匹配，但是，重写后的路径不包括原有HTML文件的访问地址，所以，一旦切换了组件，再刷新，就会出现404！

发布到生产服务器后，需要后台配合重写路径

 

vue-router：vue的官方路由解决方案，轻松实现vue中的组件切换！

vue-router  3.x   对应  vue2

vue-router  4.x   对应  vue3

 

1、新建  router.js

import { createRouter, createWebHashHistory } from "vue-router";

import Home from "./MyHome.vue";
import About from "./MyAbout.vue";
import Movie from "./MyMovie.vue";

const router = createRouter({
  history: createWebHashHistory(), //使用hash路由模式
  routes: [
    {
      path: "/home",
      component: Home,
    },
    {
      path: "/movie",
      component: Movie,
    },
    {
      path: "/about",
      component: About,
    },
  ],
});

export default router;

2、在 main.js 中引入模块并挂载

import { createApp } from "vue";
import App from "./router/App.vue";
import router from "./router/router.js"; //引入路由模块

const app = createApp(App);
app.use(router); //挂载路由模块
app.mount("#app");

3、<router-link> 路由链接、<router-view> 路由占位符

<template>

  <h1>路由vue-router</h1>
  <!-- 路由链接 -->
  <router-link to="/home">首页</router-link>  
  <router-link to="/movie">电影</router-link> 
  <router-link to="/about">关于</router-link>
  <hr />
  <!-- 路由占位符 -->
  <router-view></router-view>

</template>