Vue学习之路（4）

vue-router

安装 cmd进入项目里面，敲入 npm install vue-router --save-dev

修复 npm audit fix

导入

import VueRouter from 'vue-router'

显示声明

//显示声明使用VueRouter
Vue.use(VueRouter);

测试

1. 首先写三个组件用做测试–>首页，内容页，标签页

   Main.vue

   <template>
     <h1>首页</h1>
   </template>
   
   <script>
     export default {
       name: "Main"
     }
   </script>
   
   <style scoped="scoped">
   </style>
   
   

   Content.vue

   <template>
     <h1>内容页</h1>
   </template>
   
   <script>
     export default {
       name: "Content"
     }
   </script>
   
   <style scoped="scoped">
   
   </style>
   
   

   Span.vue

   <template>
     <h1>标签页</h1>
   </template>
   
   <script>
     export default {
       name: "Span"
     }
   </script>
   
   <style scoped="scoped">
   </style>
   
   

2. 编写路由主配置

   index.js

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   
   import Content from '../components/Content.vue'
   import Main from '../components/Main.vue'
   import Span from '../components/Span.vue'
   //安装路由
   //显示声明使用VueRouter
   Vue.use(VueRouter);
   
   //配置导出路由
   export default new VueRouter ({
     routes: [
       {
         //路由路径 to里面的与这里一致
         path: '/content',
         //name与path名字即可
         name: 'content',
         //跳转的路由
         component: Content
       },
       {
         //路由路径
         path: '/main',
         name: 'main',
         //跳转的路由
         component: Main
       },
       {
         //路由路径
         path: '/span',
         name: 'span',
         //跳转的路由
         component: Span
       },
     ]
   })
   
   

3. 在main.js配置路由

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router' //自动扫描

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  //配置路由
  router,
  components: { App },
  template: '<App/>'
})

4. 使用

   <template>
     <div id="app">
       <h1>Vue路由</h1><br />
       <router-link to="/main">首页</router-link>
       <router-link to="/content">内容</router-link>
       <router-link to="/span">标签</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>
   
   

5. 效果