#### 1. 创建 Vue Router 实例
首先，如果你还没有设置 Vue Router，那么你需要在你的 Vue 项目中安装并配置它。假设你已经有了 Vue Router 的实例。
```javascript
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const router = new Router({
routes: [
{
path: '/home',
name: 'Home',
component: () => import('./components/Home.vue'),
},
{
path: '/protected',
name: 'Protected',
component: () => import('./components/Protected.vue'),
},
],
});
export default router;
```
#### 2. 跳转地址携带 Token
在 Vue 应用中做跳转时，你可以使用 `this.$router.push` 或 `this.$router.replace` 方法。现在假设你在某个组件中获取了 Token，并想要将其作为参数传递。
```javascript
methods: {
goToProtected() {
const token = 'your_token_here'; // 假设你获取到了 token
this.$router.push({
name: 'Protected',
query: { token: token } // 通过 query 传递 token
});
}
}
```
在这个例子中，我们使用了 `query` 参数来将 Token 附加到 URL 中。形如 `/protected?token=your_token_here`。
#### 3. 在目标组件中获取 Token
在目标组件中，你可以通过 `this.$route.query` 来获取到传递的 Token。
```javascript
export default {
name: 'Protected',
mounted() {
const token = this.$route.query.token;
console.log('Received token:', token);
// 在这里可以继续使用 token
},
}
```
#### 4. 使用 Vuex 管理 Token（可选）
为了更好地管理用户的 Token，建议使用 Vuex。可以通过 Vuex 存储 Token，然后在需要的地方进行访问。
首先，在你的 Vuex store 中设置 Token：
```javascript
const store = new Vuex.Store({
state: {
token: null,
},
mutations: {
setToken(state, token) {
state.token = token; // 设置 Token
},
},
actions: {
saveToken({ commit }, token) {
commit('setToken', token);
},
},
});
```
当用户登录或获取到 Token 后，存储它：
```javascript
methods: {
login() {
const token = 'your_token_here'; // 获取 Token 的逻辑
this.$store.dispatch('saveToken', token); // 保存 Token
this.goToProtected(); // 跳转
},
}
```
在目标组件中同样可以获取 Token：
```javascript
export default {
name: 'Protected',
computed: {
token() {
return this.$store.state.token; // 从 Vuex 取得 Token
},
},
mounted() {
console.log('Received token:', this.token);
},
}
```
#### 5. 监听路由变化（可选）
如果你的 Token 是频繁变化的（比如用户可能会注销或token过期），你可以在目标组件中设置 `watch` 来监听路由的变化。
```javascript
watch: {
'$route'(to, from) {
const newToken = to.query.token; // 或者是从 Vuex 中获取
console.log('Token changed:', newToken);
// 你可以在这里处理 Token
},
}
```
### 总结
通过以上方法，你可以在 Vue 应用中轻松地进行页面跳转并携带用户的 Token。这不仅能帮助你管理用户的登录状态，还能提高你应用的安全性。
在实际应用中，记得对 Token 进行适当的处理和存储，确保用户的数据安全。而且，使用 Vuex 来管理状态会使得你的应用更加规范和高效。
如果你有进一步的问题或场景，可以随时提出讨论！希望这些信息对你有所帮助，祝你编程愉快！
