vue-router 的配置

vue-router

1. 安装 vue-router

   npm install vue-router --save

2. 在模块化工程中使用它，因为是插件，所以用 Vue.use() 来安装

   • 导入路由对象，调用 Vue.use(VueRouter)

   • 创建路由实例，传入路由映射配置

   • 在 Vue 实例中挂载创建的路由实例

     // 导入路由对象
     import VueRouter from 'vue-router'
     import Vue from 'vue'
     import Home from '../components/Home'
     import About from '../components/About'
     
     Vue.use(VueRouter);
     // 路由和组件的映射关系
     const routes = [
       {
         path: '/home',
         component: Home
       },
       {
         path: '/about',
         component: About
       }
     ];
     
     // 创建路由实例，并传入路由映射配置
     const router = new VueRouter({
       routes
     });
     
     export default router
     

3. 使用 vue-router 的步骤

   • 创建路由组件

     <template>
       <div>
         <h2>关于</h2>
         <p>关于内容。。。</p>
       </div>
     </template>
     
     <script>
         export default {
             name: "About"
         }
     </script>
     
     <style scoped></style>
     

     <template>
     <div>
       <h2>首页</h2>
       <p>首页内容。。。</p>
     </div>
     </template>
     
     <script>
         export default {
             name: "Home"
         }
     </script>
     
     <style scoped></style>
     

   • 配置路由映射：组件和路径映射关系

     // 路由和组件的映射关系
     const routes = [
       {
         path: '/home',
         component: Home
       },
       {
         path: '/about',
         component: About
       }
     ];
     

   • 使用路由：通过 <router-link> 和 <router-view>

     <template>
       <div id="app">
     <!--  使用路由-->
         <router-link to="/home">首页</router-link>
         <router-link to="/about">关于</router-link>
         <router-view></router-view>
       </div>
     </template>
     
     <script>
         export default {
             name: 'App'
         }
     </script>
     
     <style>
       #app {
         font-family: 'Avenir', Helvetica, Arial, sans-serif;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         text-align: center;
         color: #2c3e50;
         margin-top: 60px;
       }
     </style>
     

效果