vue-router

vue-router

实现页面的跳转

1. 在cmd中输入：npm install vue-router --save-dev

   如果报错则使用：cnpm install vue-router --save-dev

2. 运行程序（如果报错则降低vue-router版本）没有错误则可以开始编写

3. 在component文件夹中创建vue文件

   

   yuanyu.vue:

   <template>
     <h1>yuanyu</h1>
   </template>
   
   <script>
       export default {
           name: "yuanyu"
       }
   </script>
   
   <style scoped>
   
   </style>
   
   

   
   

   在router下的index.js中定义路由：

   

   index.js:

   import Vue from 'vue'
   import VueRouter from "vue-router"
   
   import Content from "../components/Content";
   import Main from "../components/Main";
   import Yuanyu from "../components/Yuanyu";
   
   
   //安装路由
   Vue.use(VueRouter);
   
   
   //配置导出路由
   export default new VueRouter({
     routes:[{
       //路由路径
       path:"/content",
       name:"content",
       //跳转的组件
       component:Content
     },{
       //路由路径
       path:"/main",
       name:"main",
       //跳转的组件
       component:Main
     },
       {path:"/yuanyu",
         name:"yuanyu",
         //跳转的组件
         component:Yuanyu
   
       }]
   });
   
   

   
   

   main.js是实现路由与App.vue的接口

   main.js:

   import Vue from 'vue'
   import App from './App'
   import router from "./router"
   
   Vue.config.productionTip = false
   
   
   new Vue({
     el: '#app',
     router,
     components: { App },
     template: '<App/>'
   })
   
   

   
   

   在App.js中实现页面的显示：

   App.js:

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