vue-router路由配置+传参

1. 基本介绍

官网帮助文档地址： https://router.vuejs.org/guide/

路由的本质就是一种对应关系，根据不同的URL请求，返回对应不同的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。

在Vue中路由就是控制显示哪个页面。通过路由显示的页面是显示在App.vue中的，这符合SPA，当更改URL后只改变App.vue页面中路由对应的部分的内容，也就是说通过路由显示时也是属于局部刷新效果。

​ 在App.vue中通过<router-view/>显示路由内容。

​ 简单一句话说明：通过识别URL显示页面的功能。

2. 引入依赖

cnpm install vue-router@4

3. router-link基本跳转

实例区

<router-link to = "/login">跳转到登录页</router-link>

路由配置区

import {createRouter, createWebHashHistory, createWebHistory} from "vue-router";

/*配置路由*/
let routes = [
	{
		path: '/login',
		name: 'login',
		component: () => import('./login.vue'),
    }，   
	{
		path: '/404',
		name: '404',
		component: () => import('./404.vue'),
	},
	{
		path: '/:pathMatch(.*)*',
		redirect: '/404',
	}
]

/*注册路由*/
let router = createRouter({
	routes,
	history: createWebHistory()
})


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

3.1 router-link传参跳转

实例区

<router-link :to = "{name: 'loginA', query: {id: 100, name: 'admin'}}">访问登录窗口</router-link>

组件区

<script setup>
    
    import {useRoute} from "vue-router";

    let route = useRoute (); // 获取路由对象

    let user = route.query; // 获取参数
    
</script>

路由配置区

import {createRouter, createWebHashHistory, createWebHistory} from "vue-router";

/*配置路由*/
let routes = [
	{
		path: '/login',
		name: 'login',
		component: () => import('./login.vue'),
    }，   
	{
		path: '/404',
		name: '404',
		component: () => import('./404.vue'),
	},
	{
		path: '/:pathMatch(.*)*',
		redirect: '/404',
	}
]

/*注册路由*/
let router = createRouter({
	routes,
	history: createWebHistory()
})


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

4. router-view编程式路由基本跳转

注意点：

​ 必须自定义个一个router-view来作为组件的载体

比如：

<script setup>

</script>

<template>
	<router-view></router-view>
</template>

<style scoped>

</style>

实例区

<template>
	<button @click = "toVue('/vue1')">跳转组件1</button>	
</template>

<script setup>
	import {useRoute, useRouter} from "vue-router";
    
    let router = useRouter ();
    
    let toVue = (url) => {
	// router.push (name);
	// router.push ({name: 'a'});
	router.push (
		// {name: 'a', params: {id: 1, name: '张三'}}
		{path: url, query: {id: 1, name: '张三'}} // path和路由配置的path保持一致 name属性同理 query属性则用于页面之间的参数传递
	);
	
}
</script>

组件区

<script setup>
    import {useRoute} from "vue-router";

    let user = useRoute().query;
</script>

<template>
	<div>
		<h1>Vue 1</h1>
		<h1>{{user}}</h1>
	</div>
</template>

<style scoped>

</style>

路由配置规则

import App from './main.vue'

import {createRouter, createWebHashHistory, createWebHistory,} from 'vue-router' // 引入路由

let routes = [ // 配置路由关系
	{
		path: '/vue1', // url地址
		name: 'vue1', // 定义路由名
		component: () => import('./vue1.vue') // 引入组件
	},
	{
		path: '/404',
		name: '404',
		component: () => import('./components/404.vue')
	},
	{
		path: '/:pathMatch(.*)*',
		redirect: '/404'
	}
]
// 创建路由
let router = createRouter({
	routes, // 变量名相同可以简写
	history: createWebHistory() // 地址不带#号
})

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

4.1 嵌套式路由

实例区

<script setup>
	import {useRoute, useRouter} from "vue-router";
    
    let router = useRouter (); // 获取路由对象
    
    let toVue = (url) => { // 定义跳转路由的方法
		router.push ({path: url, query: {}});
	};
</script>

<template>
	<el-button type = "primary" @click = "toVue('/register')">访问注册窗口</el-button>

	<!--指定渲染区域-->
    <fieldset>
        <legend>登录注册显示区域</legend>
        <router-view name = 'user'></router-view>
    </fieldset>
</template>

路由配置规则

import {createApp} from 'vue'

/*引入组件*/
import App from './main.vue'

import {createRouter, createWebHashHistory, createWebHistory} from "vue-router";


/*配置路由*/
let routes = [
	{
		path: '/',
		name: 'index',
		component: () => import('./index.vue'),
		children: [
			{
				path: '/register',
				name: 'register',
				components: {user: () => import('./components/register.vue')},
			},
		],
	},
	{
		path: '/404',
		name: '404',
		component: () => import('./404.vue'),
	},
	{
		path: '/:pathMatch(.*)*',
		redirect: '/404',
	}
]

/*注册路由*/
let router = createRouter({
	routes,
	history: createWebHistory()
})


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

OK ！！！ 收尾！！！

若有误区或不能解决，私信我，远程协助你！！！