【VUE3.0体验】关于路由的一些坑

做了一个登陆界面，饿了么的

<template>
  <div class="login-box">
    <el-form
      ref="loginForm"
      :model="data.form"
      :rules="data.rules"
      label-width="80px"
    >
      <h3 class="login-title">欢迎登陆</h3>
      <el-form-item label="用户名" prop="username">
        <el-input
          v-model="data.form.username"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="userpwd">
        <el-input
          type="password"
          v-model="data.form.userpwd"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">登陆</el-button>
        <el-button @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { data, loginForm, resetForm, submitForm } from "../../bll/user/login";
export default {
  name: "login",
  setup() {
    return { data, loginForm, resetForm, submitForm };
  },
};
</script>
<style scoped>
.login-box {
   500px;
  height: 400px;
  border: 1px solid #dcdfe6;
  margin: 150px auto;
  padding: 20px 50px 20px 30px;
  border-radius: 20px;
  box-shadow: 0px 0px 20px #dcdfe6;
}
.login-title {
  text-align: center;
  margin-bottom: 40px;
}
</style>

　使用了components API，把所有的逻辑都封装在login.js里面，与此同时出了现问题，路由无法跳转，报错，按网上的写法是

import { useRouter } from "vue-router";

const router = userRouter();

router.push(...)

　但是在业务逻辑的JS中无法使用，后来经多次测试，此方法只能在vue界面中调用，在业务逻辑的JS中router打印出来为不存在。

另外，写上路由

App.vue

<template>
  <div id="app">
    <router-view /> //这个一定要加，不然跳不了。
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

router.js 还有一种用箭头函数的方法，还没研究到，明天看看，再更新吧。

import { createRouter, createWebHashHistory } from "vue-router";
import home from '@/views/Home/Home'
import login from '@/views/login/login'

export const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: '/home', component: home },
    { path: '/login', component: login }
  ]
});

导航守卫也是写在这个文件里面

导航守卫
 router.beforeEach((to, from, next) => {
   if (to.path === '/login') return next();
   const tokenStr = sessionStorage.getItem('token')
   if (!tokenStr) return next('/login')
   next()
 })

　

main.js VUE3.0不再有Vue.use，而是用app.use来代替

import { createApp } from 'vue'
import App from './App.vue'
import installElementPlus from './plugins/element'
import axios from 'axios'
import VueAxios from 'vue-axios'
import { router } from './router/index'
const app = createApp(App)
installElementPlus(app)
app.use(router)
app.mount('#app')

app.use(VueAxios, axios);//使用axios模块

//token请求用，用于鉴权验证
axios.interceptors.request.use(config => {
  config.headers.Authorization = "Bearer " + sessionStorage.getItem("token");
  return config;
});

　其他没什么了。要把逻辑按钮全弄出来。明天弄个异步请求的集成