前端笔记-vue中使用router进行页面跳转及除掉url中的#

最新推荐文章于 2025-05-06 17:32:32 发布

IT1995

最新推荐文章于 2025-05-06 17:32:32 发布

阅读量7.7k

点赞数 24

CC 4.0 BY-SA版权

分类专栏： Vue web前端文章标签： vue 前端

本文链接：https://blog.csdn.net/qq78442761/article/details/98032939

web前端同时被 2 个专栏收录

186 篇文章

订阅专栏

Vue

34 篇文章

订阅专栏

本文详细介绍了使用Vue.js进行页面跳转的方法，包括通过按钮触发路由跳转至不同页面的具体实现，展示了从HelloWorld组件到aaa组件的跳转代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

演示

代码

演示

运行截图如下：

点击后，url跳转如下：

代码

页面跳转的关键

程序结构如下：

aaa.vue

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

</template>

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

HelloWorld.vue

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

</template>

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


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

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({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/aaa',
      name: 'aaa',
      component: aaa
    }
  ]
})

通过设置mode: 'history'可以去掉url下面的