Vue 配置路由

安装路由

Vue router官网

https://router.vuejs.org/zh/introduction.html

1. 通过终端下载，利用npm 安装 Vue Router，因为我自己安装的是vue2，所以下载的版本是3：

   npm i vue-router@3.5.2 -S
   

2. 配置动态路由

   1. 在 main.js 中引入

      import VueRouter from 'vue-router';
      Vue.use(VueRouter)
      

   2. 在src下创建router文件夹和index.js文件
      

   3. 在index文件中编写核心内容

      import VueRouter from "vue-router";
      
      //引入组件
      import HomePage from '../components/HomePage/HomePage'
      
      //创建并暴露路由
      export default new VueRouter({
          //配置路由
          routes:[
              { path:'/homepage', component: HomePage}
          ]
      })
      

   4. 在main.js中注册路由

      import router from './router'
      
      new Vue({
        render: h => h(App),
        //注册路由
        router
      }).$mount('#app')
      
      

   5. 在App.vue中使用，路由占位符 router-view

      <template>
        <div id="app">
          <router-view></router-view>
        </div>
      </template>
      
      <script>
      
      
      export default {
        name: 'App',
      }
      </script>
      
      <style>
      </style>
      

路由重定向

在router文件夹下的index.js文件中配置

export default new VueRouter({
    routes:[
        //路由重定向
        { path:'/', redirect:'/homepage'},
        { path:'/homepage', component: HomePage}
    ]
})