学习博客：【Vue】vue-router路由

vue router 是 vue.js 官方的路由管理器，与 vue.js 核心深度集成，方便构建单页面应用

功能

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于Vue.js过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的CSS class的链接
• HTML5历史模式或hash模式，在IE9中自动降级
• 自定义的滚动条行为

安装

npm install vue-router --save-dev

或

cnpm install vue-router --save-dev

出现错误是因为npm版本太高，可降低npm版本 也可以安装低版本vue-router

npm install vue-router@3.5.3 --save-dev

import Vue from 'vue'
import VueRouter from 'vue-router'

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

---

测试

1. 删除多余的东西

2. components 存放自己编写的组件

3. 定义组件 Content.vue

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

4. 定义组件 Main.vue

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

5. 安装路由，新建目录 router 存放路由 index.js

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

6. main.js 中配置路由

   import Vue from 'vue'
   import App from './App'
   import router from './router' //自动扫描路由配置
   
   //关闭生产模式下给出的提示
   Vue.config.productionTip = false
   
   //显式声明使用 VueRouter
   Vue.use(router);
   
   /* eslint-disable no-new */
   new Vue({
     el: '#app',
     //配置路由
     router,
     components: { App },
     template: '<App/>'
   })
   
   

7. App.vue 中使用路由

   <template>
     <div id="app">
   
       <!--
         router-link: 默认渲染一个 a 标签  to属性为指定链接
         router-view: 用于渲染路由匹配到的组件
       -->
   
       <h1>Vue-Router</h1>
       <router-link to="/main">首页</router-link>
       <router-link to="/content">内容页</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>