vue"/>
1、vue
/src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";// 路由数组的类型 RouteRecordRaw
const routes: Array<RouteRecordRaw> = [{path: '/',// 命名路由// 好处:不需要path: '/'这样url硬编码的形式去跳转路由// 名字需唯一,不要和其他组件的路由名字重复name: 'Login',component: () => import('../components/Login.vue')},{path: '/reg',name: 'Reg',component: () => import('../components/Reg.vue')}
];const router = createRouter({history: createWebHistory(),routes
})export default router;
/src/main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 使用./router代替./router/index.ts,引入时可以省略index.ts
import router from './router';const app = createApp(App);app.use(router);
app.mount('#app');
/src/App.vue
前言:如果页面直接使用a标签,切换a标签时具有默认行为,会刷新页面
<template><!-- 如果页面直接使用a标签,切换a标签时具有默认行为,会刷新页面--><a href="/">登录</a><a href="/reg">注册</a></template>
一、使用<router-link>自定义标签切换路由,不会刷新页面
<router-link>链接方式一
to等于字符串,字符串的值是路由里path的值
<template><!-- 一、使用<router-link>自定义标签切换路由,不会刷新页面 <router-link>链接方式一to等于字符串,字符串的值是路由里path的值--><router-link to="/">登录1</router-link><router-link to="/reg">注册1</router-link><router-view></router-view></template>
<router-link>链接方式二
:to等于对象,对象的内容和router.push()的内容一致
<template><!-- <router-link>链接方式二:to等于对象,对象的内容和router.push()的内容一致--><router-link :to="{ name: 'Login' }">登录2</router-link><router-link :to="{ name: 'Reg' }">注册2</router-link><router-view></router-view></template>
二、使用编程式导航切换路由,给标签添加点击事件
router.push() 会保留历史记录,浏览器地址栏的左右箭头可以点击
router.replace() 不会保留历史记录,浏览器地址栏的左右箭头不能点击
1、router.push()
(1)goJump()的参数是路由里path的值
<script setup lang="ts">
import { useRouter } from "vue-router";const router = useRouter();const goJump = (path: string) => {// 编程式导航router.push()// 1、push字符串路径// router.push(path);// 2、push路径对象router.push({path});
}
<template><!-- 二、使用编程式导航切换路由,给标签添加点击事件 --><!-- goJump()的参数是路由里path的值 --><button @click="goJump('/')">登录3</button><button @click="goJump('/reg')">注册3</button><router-view></router-view></template>
(2)goJump()的参数是路由里name的值
<script setup lang="ts">
import { useRouter } from "vue-router";const router = useRouter();const goJump = (path: string) => {// 3、push名字对象router.push({name: path});
}
<template><!-- goJump()的参数是路由里name的值 --><button @click="goJump('Login')">登录4</button><button @click="goJump('Reg')">注册4</button><router-view></router-view></template>
2、router.replace()
(1)直接在<router-link>标签写replace属性
<template><!-- replace 不会保留历史记录,浏览器地址栏的左右箭头不能点击了 --><!-- (1)直接在<router-link>标签写replace属性 --><router-link replace to="/">登录5</router-link><router-link replace to="/reg">注册5</router-link><router-view></router-view></template>
(2)使用router.replace()方法
(3)在router.push()中增加replace属性
<script setup lang="ts">
import { useRouter } from "vue-router";const router = useRouter();const toJupm = (url: string) => {// (2)使用router.replace()方法// router.replace(url);// (3)在router.push()中增加replace属性router.push({path: url,replace: true})}</script><template><button @click="toJupm('/')">登录6</button><button @click="toJupm('/reg')">注册6</button><router-view></router-view></template>
更多推荐
1、vue
发布评论