Vue Router 路由跳转及传参

---

一、路由配置

router.js:

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld';
import Login from '@/components/Login';
import Serve from '@/components/Serve';

Vue.use(Router);

export default new Router({
    routes: [
        {
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        },
        {
            path: '/login/:color', // 使用冒号表示参数  即为动态路由
            name: 'Login',
            component: Login
        },
        {
            path: '/serve/:id?', //  :id? => ?问号的意思是该参数不是必传项，不传不会报错
            name: 'Serve',
            component: Serve
        }
    ]
});

---

二、组件式导航 router-link

router-link 是 Vue Router 提供的一个组件，用于渲染一个导航链接，它会被渲染成一个 <a> 标签，点击该标签时会导航到对应的路由。

1. 字符串跳转

<router-link to="login">to login</router-link>
<router-link to="/login">to login</router-link>

.

2. 对象跳转(动态绑定)

可以使用 v-bind（或简写为 :）动态绑定 to 属性，使其根据组件的状态或其他条件动态变化。

• path是router.js中的path

  <router-link :to="{path:'/login'}"> to login</router-link>
  

• 命名路由 name是router.js中的name

  <router-link :to="{name: 'Login'}"> to login</router-link>
  

.

3. 通过查询参数（query）向路由传参

• 通过查询参数（query）向路由传递参数（地址栏变成 /login?color=red）

• 查询参数是通过 URL 的查询字符串（即 URL 中 ? 后面的部分）传递的

通过 {{$route.query.color}} 或 this.$route.query.color 获取参数

<router-link :to="{path: '/login', query: {color: 'red' }}"> to login</router-link>

通过 {{$route.query.color}} 或 this.$route.query.color 获取参数

<router-link :to="{name: 'Login', query: {color: 'red' }}"> to login</router-link>

.

4. 通过路由参数（params）向路由传参

• 通过路由参数（params）向路由传递参数（地址栏为/login/red）

• 路由参数是通过 URL 的路径部分传递的。需要在路由配置中预先定义参数的位置，并在 router-link 的 to 属性中使用动态段（例如 '/login/:color'）来指定参数值。

首先，你需要在路由配置中设置参数：

const routes = [  
  { path: '/login/:color', component: Login},  
  // 其他路由...  
];

然后，在 router-link 中使用 to 属性的对象形式，并提供参数值：

• 若是命名路由name 则可正常获取参数，地址栏会变成/login/red
  通过 {{$route.params.color}} 或 this.$route.params.color 获取参数。

  <router-link :to="{name: 'Login', params: { color: 'red' }}"> to login</router-link>
  

• 若是直接路由path 则 params 携带参数不生效，无法获取参数
  报警告（Path "/login" was passed with params but they will be ignored. Use a named route alongside params instead.）

  <router-link :to="{path: '/login', params: { color: 'red' }}"> to login</router-link>
  

.

5. replace 替换当前历史记录

router-link 组件还提供了一个 replace 属性，当设置为 true 时，点击链接将不会向浏览器历史记录中添加新条目，而是替换当前条目。

<template>  
  <div>  
    <router-link to="/home" replace>Go to Home (Replace)</router-link>  
  </div>  
</template>

.

6. active-class 激活类名

当路由与 router-link 的 to 属性匹配时，router-link 会自动添加一个类名，默认为 router-link-active。你可以使用 active-class 属性来自定义这个类名。

<template>  
  <div>  
    <router-link to="/home" active-class="my-active-class">Home</router-link>  
  </div>  
</template>  
  
<style>  
.my-active-class {  
  color: red;  
  font-weight: bold;  
}  
</style>

---

三、编程式导航 router.push、router.replace

编程式导航是指通过JavaScript代码来导航到不同的路由，而不是通过<router-link>组件。

你可以使用router.push或router.replace方法进行编程式导航，同样的规则也适用于编程式导航：

1. 不携带参数

// 字符串
router.push('/login')

// 对象
router.push({path:'/login'})

// 命名路由
router.push({name: 'Login'})

.

2. 通过query携带参数

可通过 {{$route.query.color}} 或 this.$route.query.color 获取参数

router.push({path: '/login', query: {color: 'red' }})

可通过 {{$route.query.color}} 或 this.$route.query.color 获取参数

router.push({name: 'Login', query: {color: 'red' }})

.

3. 通过params携带参数

• 若是命名路由name 则可正常获取参数，地址栏会变成/login/red
  通过 {{$route.params.color}} 或 this.$route.params.color 获取参数。

  router.push({name:'Login', params:{ color: 'red' }})
  

• 若是直接路由path 则 params 携带参数不生效，无法获取

  router.push({path:'/login', params:{ color: 'red' }})
  

.

4. 导航完成后的回调

router.push 返回一个 Promise 对象，可以在其中处理导航完成后的逻辑：

router.push('/login').then(() => {  
  console.log('Navigation to Home is finished');  
}).catch(err => {  
  console.error('Navigation failed:', err);  
});

.

5. router.replace

router.replace 方法与 router.push 类似，但它不会向浏览器历史记录中添加新的记录，而是替换当前记录。

---

四、路由参数非必传时

path: '/serve/:id?' : id? 中?问号的意思是该参数不是必传项，不传不会报错

vue文件

<dl>
	<dt>产品及服务</dt>
	<router-link tag="dd" :to="{ name: 'Serve'}">平台</router-link>
	<router-link tag="dd" :to="{ name: 'Serve', params: { id: '1' }}">平台1</router-link>
	<router-link tag="dd" :to="{ name: 'Serve', params: { id: '2' }}">平台2</router-link>
	<router-link tag="dd" :to="{ name: 'Serve', params: { id: '3' }}">平台3</router-link>
</dl>

router/index.js文件

var router = new Router({
routes: [{
	path: '/serve/:id?', //  :id? => ?问号的意思是该参数不是必传项，不传不会报错
	name: 'Serve',
	component: Serve
}]

---

五、获取参数方法

Vue 2 (使用 Vue Router 3)中

1. 在组件中： {{$route.query.color}} 或 {{$route.params.color}}

2. 在 JS 中： this.$route.query.color 或 this.$route.params.color

Vue 3 (使用 Vue Router 4)中

Vue3中不再支持{{$route.params.color}}和this.$route.params.color方式获取路由参数

而是使用 useRoute 钩子获取路由对象

<template>  
  <div>  
    <p>Color: {{ color }}</p>  
  </div>  
</template>

<script>  
import { useRoute } from 'vue-router'  
  
export default {  
  setup() {  
    const route = useRoute()  // 使用 useRoute 钩子获取路由对象  
    const color = route.params.color // 接收参数  
    console.log(color ) // 输出：'red'
    
	return {  
	  color  
	}; 
  } 
}
</script>

---

六、总结

⚡️1. params和query的区别

特性	params	query
传参	只能通过name，不能通过path：router.push({name: 'Login', params: {color: 'red' }})	name和path都可以：router.push({path: '/login', query: {color: 'red' }})
位置	URL 路径中：http://example.com/login/red	URL 查询字符串中：http://example.com/login?color=red
刷新时	会丢失 params里面的数据	不会丢失query里面的数据
路由中配置参数	需要使用冒号 (:) 来定义动态路由参数，如 { path: '/login/:id' }	路由中不用配置参数，如 { path: '/login' }
获取参数	通过 $route.params 获取	通过 $route.query 获取
URL 编码	通常不需要手动编码，Vue Router 会处理	如果参数值包含特殊字符，可能需要手动进行 URL 编码
重新渲染	参数变化会触发目标组件的重新渲染	参数变化不会触发组件的重新渲染，除非整个路由发生变化
刷新页面	刷新页面后，浏览器会尝试匹配相应的路由，并保留 params。如果路由配置中没有对应的 params 值，可能导致页面无法正确加载。	刷新页面后，浏览器会保留查询字符串，页面通常保持正常状态。
安全性	params 是 URL 路径的一部分，可能被记录在浏览器历史、服务器日志等地方，需注意敏感信息。	query 参数也可能被记录，但通常不如 params 敏感，但仍需注意敏感信息的传递。
可读性	对于简单的动态路由参数，params 可能更具可读性。	当需要传递多个可选参数时，query 可能更具可读性。

⚡️2. 路由携带参数时

在 Vue Router 中，可以通过两种方式向路由传递参数：查询参数（query）和路由参数（params）。

1. 带查询参数query时：

   • 无论是直接路由path 还是命名路由name，地址栏会变成/login?color=red
   • 类似于get传参，参数会在浏览器地址栏中显示
   • 接收参数： this.$route.query.color

2. 带路由参数params时：

   • 只能用命名路由name，不能用路由path，地址栏会变成/login/red

   • 类似于post传参，参数不会显示

   • 接收参数： this.$route.params.color
     .
     .
     若是直接路由path：router.push({path: '/login', params: {color: 'red' }})
     则 params 携带参数不生效，无法通过$route.params.color获取参数；

     若是命名路由name：router.push({name: 'Login', params: {color: 'red' }})
     则可通过$route.params.color正常获取参数，地址栏会变成/login/red；

.

3. 设置路由map里的path值(router.js)：

1. 带查询参数 query 时，path不用改

   	{
   		path: '/login',
   		name: 'Login',
   		component: Login
   	}
   

2. 带路由参数 params 时，path应该写成:

   {
   	path: '/login/:color',
   	name: 'Login',
   	component: Login
   }
   

   如果这里不设置 path: '/login/:color'，也能通过{{$route.params.color}}和this.$route.params.color接收到数据，但地址栏不会变成/login/red，而是/login

---

七、注意

• 查询参数（query）和路由参数（params）在 URL 中的表现形式不同：查询参数出现在 URL 的查询字符串中（?key=value），而路由参数则是 URL 路径的一部分（/user/123）。

• 查询参数不会触发组件的重新渲染，除非整个路由发生变化。而路由参数的变化会触发目标组件的重新渲染（如果 props 被设置为 true 或使用了路由守卫）。

• 在编程式导航（使用 router.push 或 router.replace）时，你也可以使用相同的方式来传递查询参数和路由参数。