7.关于Vue vue-router 路由 的讲解（模块化的跳转地址）

       提示 大写C 和ctrl 终止vue的运行

 7.1什么是 vue-router 

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转；(相当于后端的转发页面，写超链接请求）    中文文档：Vue Router

route：首先它是个单数，译为路由，即我们可以理解为单个路由或者某一个路由；

routes：它是个复数，表示多个的集合才能为复数；即我们可以理解为多个路由的集合

router：译为路由器，上面都是路由，这个是路由器，我们可以理解为一个容器包含上述两个

             或者说它是一个管理者，负责管理上述两个，当用户在页面上点击按钮的时候，这个时候                router就会去routes中去查找route，就是说路由器会去路由集合中找对应的路由；

7.2 安装

  基于第一个 vue-cli 进行测试学习； 先查看node modules中是否存在vue-router,

  vue-router是一个插件包， 所以我们还是需要用npm / cnpm来进行安装的
      安装命令 npm install vue-router --save-dev

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

import VueRouter from 'vue-router' //VueRouter 是自定义名称
Vue.use(VueRouter);  //让这个Vue对象加入 路由，才能解析

7.3在项目中测试路由的使用（ 基于模块的开发，很方便）

 

 创建  router 路由的文件夹

 创建 views 视图转发页面的文件夹

这里的 main文件 是程序的主文件

App.vue 是测试程序的入口

 

 

App.vue的文件  

<template>
  <div id="app">
     <h3>这里是核心的模板代码，展示区</h3>
     <h2>在外部写模板，在这里引入（import +组件名)，实现模块化</h2>
    <router-link to="/main">转到首页</router-link>
    <br><br>
    <router-link to="/content">转到内容页</router-link>
    <br> <br>
    <router-link to="/three"> 跳转到第三个</router-link>
    <router-view></router-view>
  <!-- link  to 控制跳转位置    view 这是展示内容-->
  </div>

</template>
<script>
 //引入外部的模板
 import Content from "./components/Content";
export default {
  name: 'App',
}
</script>

  router 的index.js

//关于路由文件的配置  index 是这个文件夹默认的主文件
import Vue from 'vue'
import VueRouter from 'vue-router' //导入,并有个新名字，下面创建注意
import Content from "../components/Content";
import Main from "../components/main"
import Three from "../components/next"
//安装路由
Vue.use(VueRouter);
//配置设置路由    （就相当于页面的跳转）

//这个index 就是专门的配置跳转页面的路由文件
export default new VueRouter({ //注意这个名字
  routes:[  //数组
    {  //路由（当访问这个路径时）
        path: '/content',  //就是java 中的请求映射 RequestMapping
        name: 'content', //这个路由起的名字
      // ，跳转的组件(跳转到的新页面位置）
        component: Content
    },
    {  //路由（当访问这个路径时）
      path: '/main',
      name: 'main', //这个路由起的名字
      // ，跳转的组件(跳转到的新页面位置）
      component: Main
    },
    {  //路由（当访问这个路径时）
      path: '/three',
      name: 'three', //这个路由起的名字
      // ，跳转的组件(跳转到的新页面位置）
      component: Three
    }
   ]
  });

  主文件 mian .js

import Vue from 'vue'
import App from './App'
import router from './router/index' //VueRouter 自定义导入之后的名字
   //index是默认的 路由文件 加入这个包 就会自动扫描
Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,  //必须在主文件 声明配置路由,交给这个vue对象
  components: { App },
  template: '<App/>'
})

三个模板的文件

 

npm run dev运行程序 ，在下面的端口访问
  运行结果   点击链接就能跳转到页面

（更好的实现了模块化的开发，前后端的分离）