搭建VUE项目（三）VUE项目实现页面跳转

原创已于 2024-11-25 13:53:26 修改 · 6.3w 阅读

121 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

于 2018-06-27 10:26:17 首次发布

本文介绍了一个简单的VUE项目的路由配置方法，并通过两个页面间的相互跳转来演示其实现过程。文章展示了如何使用vue-router进行路径映射及组件加载，并提供了具体的代码实例。

打开一个VUE项目，目录结构是这样的：

如现在有两个页面aaa和HelloWorld，路由配置在index.js中：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import aaa from '@/components/aaa'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
    	path: '/aaa',
      name: 'aaa',
      component: aaa
    }
  ]
})

现在在HelloWorld中点击按钮跳转到aaa，在aaa中点击按钮也可以返回到HelloWorld:

1、HelloWorld:

<div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="go">点我跳转</button>
</div>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '哈哈'
    }
  },
  methods:{
  	go(){
  		this.$router.push('/aaa')
  	}
  }
}
</script>

2、aaa:

<template>
	<div>我是aaa
	<button @click="back">点我返回</button>
	</div>
	
</template>

<script>
export default {
  name: 'aaa',
  /*data () {
    return {
      msg: '哈哈'
    }
  },*/
  methods:{
  	back(){
  		this.$router.push('/')
  	}
  }
}
</script>

标签