Home > Article > Web Front-end > How to jump from page A to page B in vue

How to jump from page A to page B in vue

藏色散人Original: 2021-09-11 11:29:595057browse

Vue implements the method of jumping from page A to page B: 1. Set page A with code such as ""; 2. Add the redirected url to $router; 3. Set page B , code such as "created() {...}"; 4. Modify the js content.

The operating environment of this article: Windows 7 system, Vue version 2.9.6, DELL G3 computer.

How does vue jump from page A to page B?

vue jumps from interface A to interface B and carries parameters

I recently encountered a need to click a button from interface A to jump to B interface and carries parameters.

I implemented the requirement like this:

A page:

<el-button size="mini"
                   type="success"
                   @click="add"
                   icon="el-icon-plus"
                   round
                   plain>{{$t(&#39;common.add&#39;)}}</el-button>
        <el-button type="primary"
                   size="mini"
                   @click="edit"
                   icon="el-icon-edit"
                   plain
                   round>{{ $t(&#39;common.edit&#39;) }}</el-button>

Click event:

add() {
      this.lockTaskStatus = &#39;new&#39;
      this.toLockTaskManagePage()},edit() {
      this.lockTaskStatus = &#39;edit&#39;
      this.toLockTaskManagePage()},toLockTaskManagePage() {
      this.$router.push({
        path: &#39;/taskLockManage&#39;,
        name: &#39;TaskLockManage&#39;,
        params: {
          status: this.lockTaskStatus        }
      })}

Add the redirected url to $router middle.

Adding / at the front of the url in the path means it is in the root directory. If it is not added, it means it is a sub-route.

Pass parameters through a combination of path params.

B page:

created() {
    this.getParams()
  },
  watch: {
    // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
    $route: &#39;getParams&#39;
  },
  methods: {
    getParams() {
      // 取到路由带过来的参数
      const res = this.$route.params.status
      console.log(&#39;getParams&#39;, res)
    }}

Finally, you need to register in router/index.js:

{
    path: &#39;/taskLockManage&#39;,
    component: Layout,
    redirect: &#39;/taskManage/index&#39;,
    hidden: true,
    children: [
      {
        path: &#39;taskLockManage&#39;,
        component: () => import(&#39;@/views/taskManage/taskLockManage&#39;),
        name: &#39;TaskLockManage&#39;,
        meta: { title: &#39;taskLockManage&#39;, icon: &#39;user&#39;, noCache: true }
      }
    ]}

In this way, the jump can be achieved. (PS: This is a better method found so far. I hope someone can provide better guidance.)

Related recommendations: "vue.js Tutorial"

The above is the detailed content of How to jump from page A to page B in vue. For more information, please follow other related articles on the PHP Chinese website!

vue.js JS 事件

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to install vue scaffolding offlineNext article：How to install vue scaffolding offline

See more

How to jump from page A to page B in vue

Related articles