路由跳转和传参(vue3)

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

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

​ vue3路由官方文档

  1. 安装路由

npm

 npm install vue-router@4

yarn

 yarn add vue-router@4

路由跳转

  1. 首先在需要跳转的页面引入API---useRouter
 import { useRouter } from 'vue-router'
  1. 在跳转页面定义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 )都能始终正常工作

路由传参

一.标签跳转页面

  1. template中跳转方式,直接$router.push()即可
template中跳转方式,直接router.push()即可
//如
<button @click="$router.push('mine')">跳转到个人中心</button>
  1. RouterLink 跳转页面(相当于a标签)
<RouterLink to="/home">home页面</RouterLink>
  1. 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.如果提供了 pathparams 会被忽略,但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

2.上述规则同样适用于 router-link 组件的 to 属性

3.如果目的地和当前路由相同,只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2),你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息) 或者使用监听属性监听数据的变化

你可能感兴趣的:(vue3,setup语法,vue.js,javascript,前端框架)