【Vue】vue-router路由的安装、配置、使用

vue-router路由

1、说明

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

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

2、安装

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

​ vue-router是一个插件包，所以我们还是需要用npm来进行安装的。打开cmd命令行，进入你的项目目录执行如下命令。

npm install vue-router --save-dev

npm安装参数中的–save-dev是什么意思？

当你为你的模块安装一个依赖模块的时候，正常情况下你得先安装它们（在模块根目录下npm install xxx），然后连同版本号手动将它们添加到模块配置文件package.json中的依赖里（dependencies）。

-save和–save-dev可以省掉你手动修改package.json文件的步骤。

npm install xxx -save			#自动把模块和版本号添加到dependencies部分
npm install xxx --save-dev		#自动把模块和版本号添加到devdependencies部分

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

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

Vue.use(VueRouter);

将一下代码加入入口文件：

import VueRouter from 'vue-router'

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

也就是在main.js中这样写：

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

Vue.config.productionTip = false

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

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

那么同理，axios也是一样的安装方法

npm install axios vue-axios --save-dev

将下面代码加入入口文件中（main.js）

import VueAxios from "vue-axios";
import axios from "axios";

Vue.use(VueAxios,axios);

就好比你创建一个Maven项目，你要往pom.xml里加入dependency依赖，maven去帮你自动下载一样。只不过这里你是要用npm install去添加并下载依赖罢了。

3、测试

1、new一个Vue组件（不要再像之前那样new一个HTML文件了），“内容页”，Content.vue；和一个“首页”，Main.vue。

Content.vue组件如下

<template>
  <h1>内容页</h1>
</template>

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

<style scoped>

</style>

Main.vue组件如下

<template>
  <h1>首页</h1>
</template>

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

<style scoped>

</style>

style scoped中的“scoped”表示一个作用域，是在当前模板中生效。如果不加，就是在所有页面都生效。

2、安装路由，在src目录下，新建一个文件夹：router，专门存放路由

这样的话，路由的跳转，在前端就可以完成，而根本不需要经过后端。

就相当于后端的@RequestMapping。

在里面新建一个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
    }
  ]
});

但是这只是配置了路由，并没有启用。

我们需要到src下的main.js中去启用，因为整个前端工程只有一个入口main.js。

import Vue from 'vue'
import App from './App'
import router from './router'

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

注意此处import的时候，只需要from './router’就可以了，因为它会自动地扫描里面的路由配置，还是比较智能的了。

怎么启用路由，只需要放进去就行了

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip=false;

new Vue({
  el: '#app',
  //配置路由
  router,
  components: { App },
  template: '<App/>'
});

3、怎么使用配置好的路由

例如我们在App.vue组件的页面展示部分也就是template标签中写两个链接

<template>
  <div id="app">
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <router-view></router-view>
  </div>
</template>

其中router-link就好比a标签，to属性就好比href属性。

router-view的功能是展示template模板。是控制一个视图展示。

4、效果

刚打开时

点击首页

点击内容页