Vue配置router方法

最新推荐文章于 2025-07-07 08:50:39 发布

楊帥

最新推荐文章于 2025-07-07 08:50:39 发布

阅读量385

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue router 配置

本文链接：https://blog.youkuaiyun.com/yangshuaionline/article/details/88556095

Vue 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中配置路由，包括修改App.vue、创建router.js以及在main.js中的应用。同时，在HelloWorld.vue组件中添加了测试代码以验证路由设置的正确性，并展示了运行结果。

修改App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'app',
}
</script>

<style>
...
</style>

添加router.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
    mode: 'history',
    routes: [
      //下载页
      {
        path: '/aa',
        name: 'HelloWorld',
        component: () =>
          import(/* webpackChunkName: "download" */ './components/HelloWorld.vue')
      }
    ]
})

修改main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router.js'
Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App),
  
}).$mount('#app')

HelloWorld.vue中添加测试代码：

<template>
...
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  //自动触发
  mounted:function(){
      this.getABC();
  },
  methods:{
    getABC:function(){
      console.log("aaaaa");
    }
  }
}
</script>

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