路由跳转和传参(vue3)

路由跳转和传参（vue3+Ts+setup)

入门中……

9199人浏览 · 2023-03-03 14:45:27

入门中…… · 2023-03-03 14:45:27 发布

路由跳转和传参（vue3+Ts+setup)

准备工作：安装了路由，配置了路由表，全局注册了路由

vue3路由官方文档

安装路由

npm

 npm install vue-router@4

yarn

 yarn add vue-router@4

路由跳转

首先在需要跳转的页面引入API---useRouter

 import { useRouter } from 'vue-router'

在跳转页面定义router变量

 //首先在setup中定义
  const router = useRouter()

用`router.push跳转页面`(导航到不同的位置)

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })

用router.replace(替换当前位置)

 
   它的作用类似于 router.push，唯一不同的是，它在导航时不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目。
   也可以直接在传递给 router.push 的 routeLocation 中增加一个属性 replace: true
   
   router.push({ path: '/home', replace: true })
   // 相当于
   router.replace({ path: '/home' })

用router.go横跨历史

该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步，类似于 window.history.go(n)
// 向前移动一条记录，与 router.forward() 相同
router.go(1)

// 返回一条记录，与 router.back() 相同
router.go(-1)

// 前进 3 条记录
router.go(3)

// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)
值得一提的是，无论在创建路由器实例时传递什么样的 history 配置，Vue Router 的导航方法( push、replace、go )都能始终正常工作

路由传参

一.标签跳转页面

template中跳转方式，直接$router.push()即可

template中跳转方式，直接router.push()即可
//如
<button @click="$router.push('mine')">跳转到个人中心</button>

RouterLink 跳转页面（相当于a标签）

<RouterLink to="/home">home页面</RouterLink>

RouterLink 跳转传参

如果你要传入参数的话，就得绑定动态to属性。

<router-link :to="{name:'home', params: {id:1}}">

 <router-link :to="{name:'/index',params:'我的'}">22</router-link>
 <router-link :to="{name:'/',params:'我的'}">11</router-link>
 <router-link :to="{name:'/father',params:'我的'}">33</router-link>
 <router-link :to="{name:'//teleport',params:'我的'}">44</router-link>
// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id"
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留

// html 取参 route.params.id
// script 赋值取参 route.params.id
这里判定to,然后采用name来跳转到指定页面。name值是你在路由配置中的name属性。

<router-link :to="{name:'home', query: {id:1}}">

// query传参数 (类似get,url后面会显示参数)
// 路由可不配置

// html 取参 route.query.id
// script 赋值取参 route.query.id

路由跳转的时候可以配置 name 、 path ，传参方式也有 params 、query 两种。
注:传参使用带R的const router = useRouter();取参使用不带R的const route = useRoute();

一. query 显式路由传参

1. function 跳转传递参数1：显示传参 get `/item?id=1`

           setup() {
          			const router = useRouter();
          			let goBack = () =>{
          				router.push({path:'/item',query:{id:1}})
          		}

2. query 接收

//接收
<script setup>
	import { useRoute } from 'vue-router';
		const route = useRoute();
		console.log(route.query.id);
</script>

二. params 隐式路由传参

1. function跳转传递参数2：隐式传参 post

setup() {
			const router = useRouter();
			let goBack = () =>{
				router.push({
					name:'item',
					params:{id:1}
				})
			}
			return {
				goBack
			};
		},

2. params 接收

// 接收
<script>
	import { useRoute } from 'vue-router';
	export default {
		setup(){
			const route = useRoute();
			console.log(route.params.id);
		}
	}
</script>

三.通过动态路由方式进行传参。

需要注意的是他是写在路由配置文件中的！ router文件夹中的index.js文件中
{
    path: '/tiaozhn/:id',
    name: 'tiaozhn',
    component: tiaozhn//dizhi
  },

事件

function acty() {
				
			var id = 1;
			proxy.$router.push('/tiaozhn/' + id)
			
			}

接收

console.log(proxy.$route.params.id);

注意：页面传参需要注意的问题

1.如果提供了 path，params 会被忽略，但query 没有这种情况，此时需要提供路由的 name 或手写完整的带有参数的 path

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user