LS的分享博客
VueRouter-基础使用
编辑
2023-04-10
VueRouter-V4
0
请注意，本文编写于 591 天前，最后修改于 546 天前，其中某些信息可能已经过时。

目录

安装
创建路由
在VueRouter@4版本中
路由模式
VueRouter4中
VueRouter3中
访问根路由实例和当前路由实例
VueRouter4中搭配组合式API使用
VueRouter3中
RouterLink与RouterView
RouterLink
说明
语法
使用EG
RouterView
说明
分类
EG-普通路由视图
普通路由视图EG
对应的路由
EG-命名路由视图
对应的路由
动态路由
说明
注意点
EG
路由跳转与传参
name跳转与params传参
说明
注意点
报错情况1
ErrorCodeEg
分析
报错情况2
解决方案
path跳转与query传参
说明
EG
报错情况1
分析
重定向和别名
重定向
别名

安装

pnpm add vue-router@4

创建路由

创建路由文件

├── src  
| ├── App.vue  
| ├── router  
| | └── index.ts  
...

在VueRouter@4版本中

创建路由通过createRouter创建，而vue-router3中使用的是new Router;

  • src/router/index.ts
ts
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
	history: createWebHistory(),
	routes: [
		{
			path: '/',
			name: 'home',
			component: () => import('@views/IndexView.vue'),
		},
	],
});

export default router;
  • src/main.ts
ts
import { createApp } from 'vue';
import './style.css';
import router from './router/index.ts';

import App from './App.vue';

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

路由模式

VueRouter4中

同样是具有hash模式和history模式, 不同在于指定路由模式时的不同

  • hash模式： createWebHashHistory创建
  • history模式: createWebHistory创建
ts
import { createRouter, createWebHistory } from 'vue-router';
// import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
	history: createWebHistory(),
	routes: [
		{
			path: '/',
			name: 'home',
			component: () => import('@views/IndexView.vue'),
		},
	],
});

export default router;

VueRouter3中

mode直接传入history或者hash即可

ts
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
	  mode: 'history',
	  routes: [
	    {
	      path: '/',
	      name: '登录',
	      component: () => import('@/views/Login.vue')
	    },
	    ...
	  ]
 })

访问根路由实例和当前路由实例

VueRouter4中搭配组合式API使用

根路由实例： 通过useRouter获取

当前路由实例: 通过useRoute获取

VueRouter3中

根路由实例： 通过this.$router获取

当前路由实例: 通过this.$route获取

RouterLink与RouterView

说明

会被渲染为带有href属性的a标签

语法

vue
<router-link to="/about"></router-link>

使用EG

vue
<RouterLink to="/register">跳转注册页面</RouterLink>

RouterView

说明

路由视图，用于显示与url对应的组件

分类

  • 普通路由视图
  • 命名路由视图

EG-普通路由视图

普通路由视图EG

vue
<template>
	<div>
		<el-button type="primary" plain @click="changeTest(1)">登录</el-button>
		<el-button type="primary" plain @click="changeTest(2)">注册</el-button>
		<RouterLink to="/register">跳转注册页面</RouterLink>
	</div>
	<RouterView></RouterView>
</template>
...

对应的路由

ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const StaticRoutes: RouteRecordRaw[] = [
	{
		path: '/',
		name: 'home',
		component: () => import('@views/IndexView.vue'),
		children: [
			{
				path: '/login/:name',
				name: 'login',
				props: true,
				component: () => import('@views/Login/LoginView.vue'),
			},
			{
				path: '/register',
				name: 'register',
				props: { name: String },
				component: () => import('@views/Register/RegisterView.vue'),
			},
		],
	},
];

const router = createRouter({
	history: createWebHistory(),
	routes: StaticRoutes,
});

export default router;

EG-命名路由视图

命名路由视图EG

vue
<template>
	<RouterView name="login"></RouterView>
	<RouterView name="register"></RouterView>
</template>
...

对应的路由

ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const StaticRoutes: RouteRecordRaw[] = [
	{
		path: '/',
		name: 'home',
		components: {
			login: () => import('@views/Login/LoginView.vue'),
			register: () => import('@views/Register/RegisterView.vue'),
		},
	},
];

const router = createRouter({
	history: createWebHistory(),
	routes: StaticRoutes,
});

export default router;

动态路由

说明

和vue-router_v3没区别，都是path: '/login/:name/:age/:hobby'的形式

注意点

动态路由映射params:

  • 路由中要开启props: true选项
  • 路由对应的组件使用defineProps规定接受的props, 或者直接通过useRoute获取当前路由然后使用.params获取到传递的参数

touter.ts路由中的动态路由规定props:true将动态路由映射到子组件内的props上

ts
{
	path: '/',
	name: 'home',
	component: () => import('@views/IndexView.vue'),
	children: [
		{
			path: '/login/:name/:age/:hobby',
			name: 'login',
			props: true,
			component: () => import('@views/Login/LoginView.vue'),
		},
		{
			path: '/register',
			name: 'register',
			props: { name: String },
			component: () => import('@views/Register/RegisterView.vue'),
		},
	],
},

路由对应的组件: 需要通过defineProps规定接受的props参数

vue
<template>
	<div>登录界面</div>
</template>

<script setup lang="ts">
const route = useRoute();

// 在动态路由规定`props:true`后可以通过`defineProps`获取params
const propsmy = defineProps<{ name: string; age: string; hobby: string }>();

console.log('propsmy登录', propsmy);

// 不使用defineProps在动态路由规定`props:true`后可以直接通过`route.params`获取
console.log('params登录', route, route.params);
</script>

<style></style>

  • 在对应的动态路由中未规定props:true NoUsePropsItemInRouterFile

  • 规定props:true后 UsePropsItemInRouterFile

  • 动态路由对应的组件内不使用defineProps, 直接使用route.params获取

NoUseDefineProps

EG

ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const StaticRoutes: RouteRecordRaw[] = [
	{
		path: '/',
		name: 'home',
		component: () => import('@views/IndexView.vue'),
		children: [
			{
				path: '/login/:name/:age/:hobby',
				name: 'login',
				props: true,
				component: () => import('@views/Login/LoginView.vue'),
			},
			{
				path: '/register',
				name: 'register',
				props: { name: String },
				component: () => import('@views/Register/RegisterView.vue'),
			},
		],
	},
];

const router = createRouter({
	history: createWebHistory(),
	routes: StaticRoutes,
});

export default router;

路由跳转与传参

name跳转与params传参

说明

通过useRouter获取根路由实例，然后调用.push方法跳转

  • .push跳转: 会在history中添加一条记录，浏览器的返回会回到上一个记录
  • .replace跳转： 不会在history中添加记录，浏览器的返回会回到上上条记录

注意点

  • 使用params传参时只能搭配name使用

  • params的值必须为一个对象，对象的属性名必须为字符串，对象的属性值必须为string | number | null | undefined或者(string | number)[]; 所以如果属性值是一个对象则需要采用JSON.stringify()转为字符串

报错情况1

ErrorCodeEg

vue
<script setup lang="ts">
const userinfo = reactive({ name: 'xm', age: 19, hobby: { computer: true, want: ['a', 'b'] } });


const router = useRouter();
function changeTest(v: number) {
	console.log('v', v);
	router.push({ name: 'login', params: userinfo });
	/*
	不能将类型“{ name: string; age: number; hobby: { computer: boolean; want: string[]; }; }”分配给类型“RouteParamsRaw”。  
	属性“hobby”与索引签名不兼容。ts(2322)
	
	(property) LocationAsRelativeRaw.params?: RouteParamsRaw | undefined
	*/
}
</script>

分析

node_modules\vue-router\dist\vue-router.d.ts文件

看到RouteParamsRaw的类型

ts
/**
 * @internal
 */
export declare interface LocationAsRelativeRaw {
    name?: RouteRecordName;
    params?: RouteParamsRaw;
}

继续查找，以下三行就是关键代码

ts
export declare type RouteParamsRaw = Record<string, RouteParamValueRaw | Exclude<RouteParamValueRaw, null | undefined>[]>;

/**
 * @internal
 */
export declare type RouteParamValue = string;

/**
 * @internal
 */
export declare type RouteParamValueRaw = RouteParamValue | number | null | undefined;

关键是第一行代码， Record作为ts的映射类型， Exclude作为ts的过滤类型过滤T中可以赋值给K的类型

export declare type RouteParamsRaw = Record<string, RouteParamValueRaw | Exclude<RouteParamValueRaw, null | undefined>[]>;
  • Record解读
ts
interface people {
    name: string,
    age: number
}

type RecordResult1 = Record<string, people>;

/*

interface people {
    name: string,
    age: number
}

type RecordResult1 = Record<string, people>;

*/

const a: RecordResult1 = { userinfo: { name: 'xm', age: 18 } }
  • Exclude解读
type RouteParamValueRaw = string | number | null | undefined;

type ExcludeRes = Exclude<RouteParamValueRaw, null | undefined>[] // (string | number)[]

最终的类型为：

ts
export declare type RouteParamsRaw = Record<string, RouteParamValueRaw | Exclude<RouteParamValueRaw, null | undefined>[]>;

{
  [X:string]: string | number | null | undefined
} | {
 [X:string]: (string | number)[]
}

所以结论：params的值必须为是一个对象，且对象的属性名必须为字符串，属性值可以是string | number | null | undefined或者(string | number)[]，所以对于对象需要采用JSON.stringify()转为字符串

报错情况2

params-lost

官方解答

解决方案

  1. 将数据放在本地存储或pinia、vuex状态管理器中，共多个页面共享
  2. 通过query传参，或者将数据放到路由参数上(即：动态路由传参)
  3. 使用state将其保存到history上，通过window.history.state获取
vue
<script setup lang="ts">
const userinfo = reactive({ name: 'xm', age: '19', hobby: { computer: 'true', want: ['a', 'b'] } });
const router = useRouter();

function changeTest() {
	router.push({ name: 'register', state: { name: userinfo.name, age: userinfo.age, hobby: JSON.stringify(userinfo.hobby) } });
}
</script>

<template>
	<router-link :to="{ name: '/login', state: { name: userinfo.name, age: userinfo.age, hobby: JSON.stringify(userinfo.hobby) } }">登录</router-link>
	<button @click="changeTest">注册</button>
</template>

path跳转与query传参

说明

使用query传的参数以?形式拼接在地址后面

  • EG:
sh
http://192.168.100.106:3345/login/xm/19/%7B%22computer%22:%22true%22,%22want%22:[%22a%22,%22b%22]%7D

EG

  • 路由跳转
vue
<script setup lang="ts">
const userinfo = reactive({ name: 'xm', age: '19', hobby: { computer: 'true', want: ['a', 'b'] } });

const router = useRouter();

function changeTest(v: number) {
	if (v === 1) {
		router.push({ name: 'login', params: { name: userinfo.name, age: userinfo.age, hobby: JSON.stringify(userinfo.hobby) } });
	} else {
		router.push({ path: '/register', query: { name: userinfo.name, age: userinfo.age, hobby: JSON.stringify(userinfo.hobby) } });
	}
}
</script>

<template>
	<div>
		<el-button type="primary" plain @click="changeTest(1)">登录</el-button>
		<el-button type="primary" plain @click="changeTest(2)">注册</el-button>
		<RouterLink to="/register">跳转注册页面</RouterLink>
	</div>
	<RouterView></RouterView>
</template>

<style scoped></style>
  • 对应的组件内获取传递的参数

通过useRoute的.query方法获取

vue
<template>
	<div>注册界面</div>
</template>

<script setup lang="ts">
const route = useRoute();
console.log('params注册', route.query, window.history.state);
</script>

<style></style>
  • ResultEG：

query

报错情况1

ts
router.push({ path: '/register', query: { name: true, age: { a: 1 } } });
// 不能将类型“true”分配给类型“LocationQueryValueRaw | LocationQueryValueRaw[]”

分析

node_modules\vue-router\dist\vue-router.d.ts文件

ts
/**
 * @internal
 */
export declare interface RouteQueryAndHash {
    query?: LocationQueryRaw;
    hash?: string;
}

查找LocationQueryRaw，可以看到:

ts
export declare type LocationQueryRaw = Record<string | number, LocationQueryValueRaw | LocationQueryValueRaw[]>;

export declare type LocationQueryValue = string | null;

export declare type LocationQueryValueRaw = LocationQueryValue | number | undefined;

所以可以得知query传参必须为一个对象，对象的属性名为字符串或数字，对象的属性值必须为string | number | null | undefined或者(string | number | null | undefined)[]; 所以如果属性值是一个对象则需要采用JSON.stringify()转为字符串

重定向和别名

重定向

同样和vue-routerv3版本没多大区别，可以直接通过对象{path:'路由路径'}或者{name:'路由名称'}跳转

ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const StaticRoutes: RouteRecordRaw[] = [
	{
		path: '/',
		name: 'home',
		// redirect: { path: '/register' },
		redirect: { name: 'register' }
		component: () => import('@views/IndexView.vue'),
		children: [
			{
				path: '/login/:name/:age/:hobby',
				name: 'login',
				props: true,
				component: () => import('@views/Login/LoginView.vue'),
			},
			{
				path: '/register',
				name: 'register',
				component: () => import('@views/Register/RegisterView.vue'),
			},
		],
	},
];

const router = createRouter({
	history: createWebHistory(),
	routes: StaticRoutes,
});

export default router;

也可以是一个方法，返回重定向目标

ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const StaticRoutes: RouteRecordRaw[] = [
	{
		path: '/',
		name: 'home',
		redirect: () => {
			return { path: '/login/1/2/3' };
		},
		component: () => import('@views/IndexView.vue'),
		children: [
			{
				path: '/login/:name/:age/:hobby',
				name: 'login',
				props: true,
				component: () => import('@views/Login/LoginView.vue'),
			},
			{
				path: '/register',
				name: 'registers',
				component: () => import('@views/Register/RegisterView.vue'),
			},
		],
	},
];

const router = createRouter({
	history: createWebHistory(),
	routes: StaticRoutes,
});

export default router;

别名

和vue-router3不同，由于官方解答的修复，根据官方文档得知如果路由中包含参数，则别名也必须含有对应的参数

ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const StaticRoutes: RouteRecordRaw[] = [
	{
		path: '/',
		name: 'home',
		component: () => import('@views/IndexView.vue'),
		children: [
			{
				path: '/login/:name/:age/:hobby',
				name: 'login',
				props: true,
				alias: '/logins/:name/:age/:hobby',
				component: () => import('@views/Login/LoginView.vue'),
			},
			{
				path: '/register',
				name: 'registers',
				component: () => import('@views/Register/RegisterView.vue'),
			},
		],
	},
];

const router = createRouter({
	history: createWebHistory(),
	routes: StaticRoutes,
});

export default router;

本文作者:RKLS

本文链接:

版权声明:本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！