vue3学习（五）

前言

接上一篇笔记，继续Router路由相关入门知识学习，笔记与code示例，分享学习，大佬请忽略。

一、Router路由入门知识点

在这里插入图片描述

入门知识点就这些，其他心法可以去官网继续深造。

二、code示例

按照前面分享的“webstorm新建vue项目相关问题”新建vuejs项目
在src下新增router目录，目录下新建index.js
在src下新增views目录，目录下新建多个页面组件
修改main.js文件内容
修改App.vue组件内容

1.views下新建页面组件

HomePage.vue

<script setup>

</script>

<template>
  <div>
    <h1>Home</h1>
    <p>This is an home page</p>
  </div>
</template>

<style scoped>

</style>

AboutPage.vue

<script setup>

</script>

<template>
  <div>
    <h1>About</h1>
    <p>This is an about page</p>
  </div>
</template>

<style scoped>

</style>

UserView.vue

<script setup>

import {ref} from "vue";

//:to写法1
const registerQuery = ref({
  path: '/user/register',
  query: {
    username: '肥仔哥哥1930',
    password: '456'
  }
})
console.log("registerQuery传参to1写法", registerQuery);

//:to写法2
const registerParam = ref({
  name: 'UserRegister',
  query: {
    nickName: '说好一辈子',
    sex: '男'
  }
});
console.log("registerParam传参to1写法", registerParam);

// :to写法3
const userInfoParam = ref({
  name: 'UserInfo',
  params: {
    name: '肥仔哥哥1930',
    age: 18,
    sex: '男'
  }
});
console.log("userInfoParam传参to3写法", userInfoParam);

</script>

<template>
  <div>
    <h1>User</h1>
    <p>
      <router-link to="/user/login?username=肥仔哥哥&password=123">用户登录</router-link>
      |
      <!--      <router-link to="/user/register">用户注册</router-link>-->
      <!--      <router-link :to="registerQuery">用户注册</router-link>-->
      <router-link :to="registerParam">用户注册</router-link>
      |
      <!--      <router-link to="/user/info/韦小宝/100/男">用户信息</router-link>-->
      <router-link :to="userInfoParam">用户信息</router-link>
    </p>
    <router-view/>
  </div>
</template>

<style scoped>

</style>

UserLogin.vue

<script setup>
import {onMounted} from "vue";
import router from "@/router";

//取路由传参
const routerParams = router.currentRoute.value.query;
console.log("用户登录路由传参",routerParams);

//取路由元信息
const routerMeta = router.currentRoute.value.meta;
console.log("用户登录路由元信息",routerMeta);

onMounted(() => {
  //vuejs的暴露写法：this.$route
  console.log("UserLogin挂载，路由对象", router.currentRoute.value); //当前激活的路由信息对象
  //仔细看控制台打印的内容，包含一个query对象，里面就是路由传参数的内容
});

//定义跳转用户注册按钮的点击事件
function goUserRegister(){
  //跳转到用户注册页面
  router.push({name: "UserRegister", query: {}});
}

</script>


<template>
  <div>
    <h1>User Login</h1>
    <p>用户名：<input type="text" v-model="routerParams.username"/></p>
    <p>密码：<input type="password"/></p>
    <button  @click="goUserRegister">跳转到用户注册</button>
  </div>
</template>

<style scoped>

</style>

UserRegister.vue

<script setup>
import {onMounted} from "vue";
import router from "@/router";

const routerQuery = router.currentRoute.value.query;
console.log("用户注册路由传参query",routerQuery);


onMounted(() => {
  console.log("UserRegister挂载，路由对象", router.currentRoute.value); //当前激活的路由信息对象
});

</script>

<template>
  <div>
    <h1>User Register</h1>
    <p>用户名：<input type="text" v-model="routerQuery.username"/></p>
    <p>昵称：<input type="text" v-model="routerQuery.nickName"/></p>
    <p>密码：<input type="password"/></p>
    <p>重复密码：<input type="password"/></p>
    <button @click="router.back()">后退</button>
  </div>
</template>

<style scoped>

</style>

UserInfo.vue

<script setup>
import {onMounted} from "vue";
import router from "@/router";

//
const routerParams = router.currentRoute.value.params;
console.log("用户信息路由传参",routerParams);

onMounted(() => {
  console.log("UserInfo挂载，路由传参数", router.currentRoute.value); //当前激活的路由信息对象
});

</script>

<template>
  <div>
    <h1>User Info</h1>
    <p>用户名：{{ routerParams.name }}</p>
    <p>年龄：{{ routerParams.age }}</p>
    <p>性别：{{ routerParams.sex }}</p>
  </div>
</template>

<style scoped>

</style>

2.router下index.js

import {createRouter, createWebHistory,createWebHashHistory} from 'vue-router'
import Home from '../views/HomePage.vue';
//import About from '../views/AboutPage.vue';

console.log(createWebHistory());
console.log(createWebHashHistory());

//定义路由的配置项
const routes = [
    {
        path: '/', //指定url路径，/称为根路径
        name: 'Home', //路由名称，用来标识当前路由，唯一
        component: Home //对应组件
    },
    {
        path: '/about',
        name: 'About',
        component: () => import('../views/AboutPage.vue') //懒加载，路由的懒加载，是通过import()函数实现的
    },
    {
        path: '/user',
        name: 'User',
        component: () => import('../views/UserView.vue'),
        children: [
            {
                path: 'login', //不以/开头的路径就是相对路径，实际路径是/user/login
                name: 'UserLogin',
                component: () => import('../views/UserLogin.vue'),
                meta: { //路由元信息，自定义的数据信息
                    msg: '这是登录页面',
                    needCheck: true
                }
            },
            {
                path: '/user/register', //绝对路径
                name: 'UserRegister',
                component: () => import('../views/UserRegister.vue')
            },
            {
                path: '/user/info/:name/:age/:sex', //to传参数设置路由path
                name: 'UserInfo',
                component: () => import('../views/UserInfo.vue')
            }
        ]
    },
    {
        path: '/:pathMatch(.*)*', //匹配所有路径，配置404页面，也就是找不到路由的时候的页面
        //name: 'NotFound',
        //component: () => import('../views/NotFound.vue')
        redirect: {name: 'Home'} //重定向，重定向到Home页面
    }

]

//创建路由的实例
const router = createRouter({
    //history: createWebHashHistory(), //路由的模式，history模式，hash模式
    history: createWebHistory(), //路由的模式，history模式，H5出的history模式
    routes //路由的配置项
})

//配置路由守卫
router.beforeEach((to, from, next) => {
    console.log('beforeEach', to, from)
    //判断访问的是不是主页，如果是用户的登录页面，直接放行
    if (to.name === 'Home' || to.name == 'UserLogin') {
        console.log('访问的是主页，直接放行');
        next(); //放行
    }
    //判断访问的是不是登录了，如果没有登录，跳转到登录页面
    const user = sessionStorage.getItem('user');
    if (!user) {
        console.log('用户未登录，跳转到登录页面')
        //next('/user/login') //跳转到登录页面
        next({name: 'UserLogin'});
    }

    next(); //放行


})

export default router

3.main.js

import { createApp } from 'vue'
import App from './App.vue'
//导入路由
import router from './router'

createApp(App).use(router).mount('#app')

4.App.vue

<template>
  <div id="nav">
    <!-- 使用内置组件router-link定义导航，to属性：指定链接，url -->
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/user">User</router-link>
  </div>
  <!-- router-view渲染路由对应的组件，将组件显示在当前位置 -->
  <router-view/>
</template>

<script setup>

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>