vue-router

使用vue-cli快速创建项目

1. vue init webpack test
2. Install vue-router? Yes,其他的选No
3. 安装vue-router软件包

   # 安装 vue-router
   npm install vue-router --save-dev
   

4. 安装项目所需的软件包

   npm install
   

5. 新建vue组件

   <!--Content.vue-->
   <template>
       <h1>内容页</h1>
   </template>
   
   <script>
       export default {
           name: "Content"
       }
   </script>
   
   <style scoped>
   
   </style>
   
   <!--Home.vue-->
   <template>
       <h1>欢迎进入我们的网站!!!</h1>
   </template>
   
   <script>
       export default {
           name: "Home"
       }
   </script>
   
   <style scoped>
   
   </style>
   
   

6. 编写router/index.js

   import Vue from 'vue'
   // 导入路由软件包
   import Router from 'vue-router'
   // 导入要路由的组件
   import Home from '../components/Home'
   import Content from '../components/Content'
   
   // 安装路由
   Vue.use(Router);
   
   export default new Router({
     routes: [
       {
         // 路由路径
         path: '/home',
         name: 'home',
         // 路由地址(要跳转的组件)
         component: Home
       },
       {
         path: '/content',
         name: 'content',
         component: Content
       }
     ]
   })
   

7. 在main.js中导入`编写的路由配置

   import Vue from 'vue'
   import App from './App'
   // 导入路由配置,如果配置名为index.js可以只写包名
   import router from './router'
   
   Vue.config.productionTip = false;
   
   new Vue({
     el: '#app',
     // 使用路由
     router,
     components: { App },
     template: '<App/>'
   });
   

8. 在App.vue添加路由标签

   <template>
    <div id="app">
      <h1>test</h1>
      <router-link to="/home">首页</router-link>
      <router-link to="/content">内容</router-link>
      <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>
   

9. 启动项目

   npm run dev
   

项目结构