Vue配置router方法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yangshuaionline/article/details/88556095

1. 修改App.vue

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

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

<style>
...
</style>

2. 添加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')
      }
    ]
})

3. 修改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')

4. 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>

5. 运行结果：