VUE3 路由传参

1.声明式导航与传参

传统情况下的跳转页面是<a>标签；因为vue3主要是单页面应用；所以是页面内跳转；我们点击导航栏，就会出现单页面的跳转；跳转的出口是<router-view>；那控制跳转的方式（也就是知道要跳转到哪个页面）就是<router-link>;其本质还是 a 标签

1.1注意

router-link 会⾃动给当前导航添加两个类名，有什么区别呢？

答：1、 router-link-active : 模糊匹配

        2、 router-link-exact-active : 精确匹配

1.2传参方式

1. 查询参数传参

2. 动态路由传参

1. 查询参数传参

格式

//字符串

<router-link to="/path?参数名=值&参数名=值&……"> xxx </router-link>

//对象

<router-link :to="{

path: '/path',

query: {

参数名: 值

...

}

}"> xxx </router-link>

接收示例

<script setup>

import { useRoute } from 'vue-router'

// 得到当前激活的路由对象

const route = useRoute()

// 获取查询参数

console.log(route.query)

</script>

举例

<!-- 字符串 -->

<router-link to="/friend?id=10086"> 朋友 </router-link>

<!-- 对象 -->

<router-link :to="{

        path: '/friend',

        query: {

        id: 10086

        }

}"> 朋友 </router-link>

接收

<script setup>

import { useRoute } from 'vue-router'

const route = useRoute()

console.log(route.query.id)

</script>

2.动态路由传参（声明式导航传动态参）

在路由表中

import User from './User.vue'

// 这些都会传递给 `createRouter`
const routes = [
  // 动态字段以冒号开始
  { path: '/users/:id', component: User },
]

也可以带多个动态参

path: '/users/:id/:name/:token/:......'

为什么说是动态参呢？答：<router-link :to="`/user/${变量名}`">我是可以传递一个动态的ref属性的变量名，来达到操控目地的；

格式：

<router-link to="/path/具体值"> xxx </router-link>

<router-link :to="{

        name: 'Friend',

        params: {

        参数名: 具体值

        }

}"> xxx </router-link>

//接收方

<script setup>

import { useRoute } from 'vue-router'

const route = useRoute()

// 获取动态路由参数

console.log(route.params)

</script>

代码示例

createRouter({

routes: [ {

        name: 'Friend',

        path: '/friend/:fid',

        component: Friend

} ]

})

<!-- 字符串 -->

<router-link to="/friend/10010"> 朋友 </router-link>

<!-- 对象 -->

<router-link :to="{

name: 'Friend',

params: {

fid: 10010

}

}"> 朋友 </router-link>

<script setup>

import { useRoute } from 'vue-router'

const route = useRoute()

console.log(route.params.fid)

</script>

 2.重定向

const routes = [{ path: '/home', redirect: '/' }]        //跟路径名

 const routes = [{ path: '/home', redirect: { name: 'homepage' } }]        //跟命名路由

 跟一个方法，动态返回重定向目标：

 const routes = [
  {
    // /search/screens -> /search?q=screens
    path: '/search/:searchText',
    redirect: to => {
      // 方法接收目标路由作为参数
      // return 重定向的字符串路径/路径对象
      return { path: '/search', query: { q: to.params.searchText } }
    },
  },
  {
    path: '/search',
    // ...
  },
]

3.404设置

path: "*" (任意路径) ‒ 前⾯不匹配就命中最后这个

import _404 from '@/views/404.vue'

 const router = new VueRouter({

routes: [

 ...

 { path: '*', component: _404 } // 404配置, 推荐放在路由表的最后⼀个

 ]

 })

4.编程式导航与传参

5.嵌套与守卫