我已经用过这个Vue了.js路由示例应用程序.

https://github.com/chrisvfritz/vue-2.0-simple-routing-example

百分百

const app = new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname,
    token : "",
    errorMessage : '', etc...etc..
  },

现在是插座.我把令牌设置为"sdawdda2d2ada2ad22ad"

当应用程序启动时,currentRoute等于"/"

'/': 'Home',
'/about': 'About'

当我想判断/about(url:localhost:8080/about)时,它的效果很好,但是令牌和errorMessage再次为空,因为应用程序再次创建.

如果我想在不丢失令牌值的情况下更改页面,我可以使用:

this.currentRoute = "/about"       (url: localhost:8080)

它的工作原理很好,但url不变,所以我不能在浏览器中使用后退按钮.

非常感谢!

推荐答案

当你从Home路由移动到About路由时,你需要使用<router-link>来导航.

home页导航到about页,如下所示:

<router-link to="/about">Go to my About Page</router-link>

这将生成一个路径设置正确的常规html锚定标记<a>.当你点击它时,它将带你进入about组件,而不是从服务器刷新整个html网页(带有应用程序脚本).

当仅更改路由组件时,Vue实例上的所有其他Vue参数(如令牌)将保留.

请看这里的vue-router:http://router.vuejs.org/en/essentials/getting-started.html

记住在你的主应用程序中为路由设置一个占位符,如下所示:<router-view></router-view>.当你改变路由时,HomeAbout组件将被渲染到router-view中.

Vue.js相关问答推荐

:deep() 带有嵌套 scss 规则的语法

vuex 未知动作类型:addTodo

云Firestore保存额外的用户数据

在重复内容区域中添加

如何在 vue 组件之外访问$apollo?

VueJS:为什么在input事件处理程序中触发Input输入事件?

如何使 Rails 与 vue.js 一起工作?

全局方法和实例方法有什么区别?

为什么 CSS 关键帧动画在具有范围样式的 Vue 组件中被 destruct ?

如何在 vue 3 脚本设置中的组件上使用 v-model

Javascript/vue.js 接收json

如何使用 Vuejs 和 Laravel 获取当前经过身份验证的用户 ID?

Vuejs 3 从子组件向父组件发出事件

输入文件 Select 事件在 Select 同一文件时未触发

简单的点击功能不触发

try 通过 Vue.js 中的渲染传递props并观察它们

使用 Vue 的点击编辑文本字段

Vue 2 转换不起作用

如何在 Vue.js 中延迟 @keyup 处理程序

如何在 vue 组件中使用 vuex?