vue路由设置

84 阅读 0 评论 56 点赞

我是靠谱客的博主高大太阳，最近开发中收集的这篇文章主要介绍vue路由设置，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

最主要的配置文件index.login，该文件将地址和页面关联起来

import { createRouter, createWebHashHistory } from "vue-router";
// 导入要显示的文件
import login from "../views/Login.vue";
import register from "../views/register.vue";
//路由配置文件
// 创建路由管理对象
const router = createRouter({
  // 路由配置
  history: createWebHashHistory(),
  routes: [
    {
      path: "/",// 当访问首页时，重定向跳转到login界面
      redirect:{
       name:"Login"
      } 
       },
    {
      path: "/login",// 路径
      component: login,//要跳转的页面，上面赋值了
      name: "Login"//随便起
    },
    {
      path: "/register",// 路径
      component: register,//要跳转的页面，上面赋值了
      name: "register"//随便起
    }
  ]
});
// 导出管理对象，这是一个模块，最终要依附于vue框架，就是要加载到vue的全家桶中
export default router;

在main.js中导入这个路由

// import Vue from "vue";
// 此文件是整个程序的启动页面
// vue3的写法   从vue的包中导出一个方法，用于创建vue的程序
import { createApp } from "vue";
// 导入一个全局组件，这个组件就是app
import App from "./App.vue";
import Elemntplus from "element-plus";
import "element-plus/dist/index.css";

// 导入路由管理对象
import router from "./router/index.js";
// 创建vue的程序 相当于new Vue()
const app = createApp(App);
app.use(Elemntplus);
app.use(router);
// 接管页面   接管  public 的  index.html中的 app
app.mount("#app");

在App.value中写 router-view标签，配合路由

<template>
<!-- 会配合路由模块，根据不同的路由，显示不同的虚拟页面 -->
<router-view></router-view>
</template>
<script>

</script>
<style>
* {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
html,body,#app{
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: wheat;
}
</style>

效果是输入路径就可以访问到相应的页面，请求新的页面，不需要再向服务器发送请求