router（路由）的简单使用

一，要想使用router首先需要下载router。在控制台输入npm i vue-router

二，如图，我们想通过点击注册事件从Register.vue跳转到Login.vue

给Register.vue添加点击事件

三，将main.js中改为如图所示代码，全局注册router

import './style.css'
import App from './App.vue'

import router from './router/index.js' 

let app = createApp(App)

app.use(router)

app.mount('#app')

五，在src目录下创建router文件夹，并创建index.js

import { createRouter, createWebHashHistory } from "vue-router";
import Register from "../components/Register.vue"

const routes = [
  //  每个路由规则都是一个对象，这个规则对象有两个必须的属性：
  //  属性1 是 path，表示监听哪个路由链接地址
  //  属性2 是 component，表示如果路由是前面匹配到的 path，则展示component对应的那个组件
  //  注意： component的属性值，必须是一个组件的模板对象，不能是组件的引用名称
  {
    path: "/",  
    redirect:"/register" ,
  },
  {
    path: "/register",
    name: "register",   //name代表命名路由
    component: Register,
  },
  {
    path: "/login",
    name: "login",   //name代表命名路由
    component: () =>
      import("../components/Login.vue"),
  }
];

const router = createRouter({
  //hash模式
  history: createWebHashHistory(),
  //挂载路由规则
  routes,
  //设定路由激活的选项的样式
  linkActiveClass: "router-active",
});

export default router;

六，将App.vue中代码改为如图所示

七，输入npm run dev   点开页面并单击事件便可实现简单路由跳转