Vue(16) —— vue-router路由

---

注意

    vue项目是单视图页面，即整个项目中只有这一个html文件index.html，所以我们在vue项目中进行视图跳转的时候必然不是我们传统意义上的页面跳转。在vue项目中数量庞大的是组件，而html页面上也就只有一个div标签挂载的根组件，所以vue中的视图跳转说的是根组件挂载的div标签中显示的内容/数据/效果的跳转(因为每个子组件的视图不一样，且页面上只有一个div标签，所以只要这个div中组件展示的内容改变，也就实现了原来我们使用a标签跳转视图的效果)，而不是html页面的跳转

---

1.为什么要使用vue-router路由

    因为vue本身符合SOC关注度分离原则，所以它只能做视图显示的工作，但是在平时写网页的时候我们经常使用到路由跳转功能，比如html中的a标签；所以路由跳转的工作它只能依赖于其他工具，而vue-router路由是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌，包含的功能有：

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

---

2.安装vue-router路由

    基于第一个vue-cli进行测试学习，先查看node_modules中是否存在 vue-router
    vue-router 是一个插件包，因此咱们仍是须要用 npm/cnpm 来进行安装的，打开命令行工具，进入你的项目目录，输入下面命令

npm install vue-router --save-dev

若是在一个模块化工程中使用它，必需要经过 Vue.use() 明确地安装路由功能：

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

Vue.use(VueRouter);

---

3.使用vue-router路由实现vue组件中的路由跳转

    清理项目中没用的部分代码，剩下一个干净的项目骨架，就是把helloworld.vue和logo删了，我们用不上了

• 清理之后的app.vue

<template>
  <div id="app">
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</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>

• 清理之后的main.js

import Vue from 'vue'
import App from './App'
import VueRouter from "vue-router"

Vue.config.productionTip = false

//vue中要使用导入的组件，必须显式的声明
Vue.use(VueRouter)  //声明vue对象可以使用组件VueRouter

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

• 首先我们创建两个子组件Content.vue和Main.vue，这两个组件用于测试路由跳转

<template>
  <h3>子组件Content.vue的数据内容</h3>
</template>

<script>
export default {
  name: "test"
}
</script>

<style scoped>

</style>

<template>
  <h3>子组件Main.vue的数据内容</h3>
</template>

<script>
export default {
  name: "Main"
}
</script>

<style scoped>

</style>

---

• 所谓路由就是在我们请求对应的路径的资源的时候，按照指定的路由规则将我们的请求转发到指定的服务器上的规则；这其实就和SSM框架中的注解@RequestMapping的作用差不多，但是在前端我们需要使用一个js文件来存储我们的路由规则
• 按照官方文档的建议，我们创建一个router文件夹，并将路由主配置文件命名为index.js，最后将我们的路由规则写在这个文件里面(注意：前端工程中喜欢将一个文件夹中的主配置文件命名为index.js，像这里的路由主配置文件)

---

• 配置路由js文件

import Vue from 'vue'
import VueRouter from "vue-router";
import Content from "../components/Content";
import Main from "../components/Main";

//安装路由
Vue.use(VueRouter)//显示的配置vue对象使用路由对象

//配置路由
export default new VueRouter({
  routes:[
    {
      //路由的路径
      path:"/content",//类似于@RequestMapping("uri")
      //跳转的组件
      component:Content
    },
    {
      //路由的路径
      path:"/Main",
      //跳转的组件
      component:Main
    }
  ]
})

• 配置main.js文件中的vue对象的router属性，让这个vue对象中可以使用路由跳转组件视图
  
• 在App.vue中使用直接使用路由跳转标签，我们一共需要使用两个标签
  • < router-link to="/跳转的路由" >，它的用法就和html中的< a >用法类似，to属性对应a标签的href属性
  • < router-view >，由于我们本来即使单视图项目，没有其他的html文件可以跳转，所以只能在一个页面中跳转组件对应的视图实现页面跳转的效果；
    • 这个标签可以定义在哪里展示跳转的视图，这就意味着我们可以自由的定义用户点击这个路由跳转之后在div的哪个位置展示我们的跳转视图；
    • 如果< router-link to="/跳转的路由" >不配合使用这个标签，那么我们将看不到跳转的组件视图；

<template>
  <div id="app">
    <h3>App.vue页面的内容</h3>
    <router-link to="/Main">Main</router-link><!--等效于html中的a标签-->
    <router-link to="/content">content</router-link>
	<Content1></Content1>
    <router-view></router-view><!--展示router-link跳转的视图-->
  </div>
</template>

<script>
import Content1 from "./components/Content.vue"
export default {
  name: 'App',
  components: {
    Content1
  }
}
</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>

• 测试
  
  
      这就是vue的强大之处，开局一张图/一个html文件，效果全靠根组件和子组件

---

小结

vue项目中vue-router路由使用步骤

• 首先定义好要跳转的子组件
• 在router文件夹下的index.js文件中导入这个子组件并为它在routes数组中新值一个路由规则，只需要配置path和component两个属性
• 去main.js中导入路由配置文件，可以重命名为router
• 在全局唯一的vue对象的构造中添加一个成员变量router/刚刚引入的路由配置文件
• 到App.vue中使用< router-link >和< router-view >两个标签，其中< router-link >需要配置to属性为我们在路由js文件中已经注册的路由规则中的一条的path属性；< router-view >用于展示视图跳转结果，这两个标签必须配套使用
• 开启项目测试效果