vue-router 路由

 

说明

学习的时候，尽量打开官方文档。

Vue Router 是 Vue.js 官方的路由管理器，他和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

包含的功能有：

• 嵌套的路由/视图表

• 模块化的、基于组件的路由配置

• 路由参数、查询、通配符

• 基于 Vue.js 过度系统的视图过度效果

• 细粒度的导航控制

• 带有自动激活的 CSS class 的链接

• HTML5 历史模式或 hash 模式，在 IE9 中自动降级

• 自定义的滚动条行为

安装

vue-router 是一个插件包，所以我们还是需要 npm/cnpm 来进行安装的。打开命令行工具，进入你的项目目录，输入下面的命令：

npm install vue-router --save-dev

 

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确的安装路由功能

import Vue from 'vue'
import VueRouter from 'vue-router'
​
Vue.use(VueRouter);

 

测试

测试基于：https://www.cnblogs.com/kaisheng-reflect/p/14994142.html 中的 my-vue 项目

1. 先删除没有用的东西，如 assets 下的 logo 、hello.vue、hello.js

2. components 目录下存放我们自己编写的组件

3. 定义一个 Content.vue 组件

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

    

4. 安装路由，在 src 目录下新建一个文件夹 router ，专门存放路由。在 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: [
       {
         name: 'content',
         path: '/content',
         component: Content
       },
       {
         name: 'main',
         path: '/main',
         component: Main
       }
     ]
   });

    

   
   ​

5. 在 main.js 中配置路由

   import Vue from 'vue'
   import App from './App'
   ​
   //导入路由配置目录
   import router from './router' //自动扫描里面的路由配置
   ​
   //用来关闭生产模式下给出的提示
   Vue.config.productionTip = false
   ​
   //显式声明使用 VueRouter
   new Vue({
     el: '#app',
     router, //配置路由
     components: {App},
     template: '<App/>'
   })
   ​

    

6. 在 App.vue中使用路由。

   <template>
     <div id="app">
       <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>