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 >用于展示视图跳转结果,这两个标签必须配套使用
  • 开启项目测试效果
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页