【Vue】11 VueRouter Part1 概述 & 入门
什么是路由？
即通过互联网把信息从源地址传输到目的地址的活动
路由决定数据包从来源到目的地的路径
转送将输入端的数据转移到合适的输出端
后端路由：
早起网站开发全部由服务器渲染，例如
Java的JSP，.NET的ASP，PHP
服务器直接生产渲染好的HTML页面，返回给客户端展示
一个网站非常多的页面，服务器如何处理？
每个页面都有自己对应的网路地址URL：
Url会发送到服务器，服务器根据URL进行匹配，并且交给一个Controller进行处理
控制器处理之后最终生成数据或者页面，返回给前端
好处：
有利于SEO优化
缺点：
整个页面开发，由后端程序员编写和维护
前端人员开发页面必须掌握后端语言才可以开发
逻辑和数据混杂一起，维护困难
前端路由：
Ajax使得数据的传输不再需要服务器编写服务器页面，后端只提供API（地址）传输数据
前端使用Ajax接收数据：再使用JavaScript渲染数据
优点：
职责明确，后端专注逻辑与数据，前端专注于渲染，可视化，用户体验
移动端出现后，后端不需要任何处理，继续使用之前的API即可
前后端是一个趋势
【Vue - Router】
Vue开发属于前后端分离的单页面应用，由前端来维护路由
通过改变url而页面不进行整体的刷新
目前流行的前端三大框架：都由自己的路由实现：
Angular : ngRouter
React : reactRouter
Vue : vue-router
vue-Router是vue官方提供的路由插件，和vue本身深度集成
适用于单页面构建：
vue-Router单页应用，页面的切换，即组件的切换：
【安装vue-router】
新建一个项目
vue create 项目目录名称
npm install vue-router --save
1、导入路由对象，调用Vue.use(VueRouter)
2、创建路由实例，传入路由映射配置
3、在Vue中挂载创建的路由实例
创建router目录和index.js
index.js编写：
import Vue from 'vue'; import VueRouter from "vue-router"; // 导入路由插件 Vue.use(VueRouter); //注入路由插件 const routes = []; // 定义路由 const router = new VueRouter({ // 创建路由实例 routes }); export default router; // 导出路由实例
在main.js引入路由：
import Vue from 'vue' import App from './App.vue' import router from "./router"; // ./router/index.js 因为是index.js，可以默认不写 Vue.config.productionTip = false new Vue({ render: h => h(App), router }).$mount('#app')
删除HelloWorld.vue
在App.vue取消组件：
<template> <div id="app"> </div> </template> <script> // import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', } </script> <style lang="stylus"> #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>
创建一个首页组件和一个样本组件
<template> <div> <h2>这是首页组件</h2> <p>这是首页的内容</p> </div> </template> <script> export default { name: "home" } </script> <style scoped> </style>
样本：
<template> <div> <h2>样本的标题</h2> <p>样本的标签</p> </div> </template> <script> export default { name: "sample" } </script> <style scoped> </style>
【使用vue-router】
使用步骤：
1、创建路由组件：
2、配置路由映射，将路由和组件进行关联
3、使用路由
配置路由（index.js）：
import Vue from 'vue'; import VueRouter from "vue-router"; // 导入路由插件 // 导入路由组件 import home from "../components/home"; import sample from "../components/sample"; Vue.use(VueRouter); //注入路由插件 const routes = [ // 定义路由 { path : '/home', component : home }, { path : '/sample', component : sample } ]; const router = new VueRouter({ // 创建路由实例 routes }); export default router; // 导出路由实例
两个必要的组件：
router-link : 设置路由跳转
router-view : 显示当前路由组件
使用组件（App.vue）：
<template> <div id="app"> <h2>这是App.vue组件的标题</h2> <router-link to="/home"> 首页 </router-link> <br> <router-link to="/sample"> 样本 </router-link> <router-view></router-view> </div> </template> <script> export default { name: 'App' } </script> <style lang="stylus"> #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>
启动项目，访问页面：
当点击样本时：
【Router设置首页默认路径】
import Vue from 'vue'; import VueRouter from "vue-router"; // 导入路由插件 import home from "../components/home"; import sample from "../components/sample"; Vue.use(VueRouter); //注入路由插件 const routes = [ { path : '/', redirect : home }, { path : '/home', component : home }, { path : '/sample', component : sample } ]; // 定义路由 const router = new VueRouter({ // 创建路由实例 routes }); export default router; // 导出路由实例
访问/重定向到home
默认情况，路径的改变使用的是URL的hash,如果我们希望使用的是H5的History模式，
可以进行如下配置：
import Vue from 'vue'; import VueRouter from "vue-router"; // 导入路由插件 import home from "../components/home"; import sample from "../components/sample"; Vue.use(VueRouter); //注入路由插件 const routes = [ { path : '/', redirect : home }, { path : '/home', component : home }, { path : '/sample', component : sample } ]; // 定义路由 const router = new VueRouter({ // 创建路由实例 routes, mode : 'history' }); export default router; // 导出路由实例
【Router-Link再补充】
to属性就是a标签的href属性，值是具体的访问地址
其他属性：
tag 指定router-link会被渲染成什么标签，默认a标签 例如： <router-link to="/sample" tag="li> 样本 </router-link> active-class 被点击后自动给当前元素设置一个router-link-active的class 作用是改变激活状态下的显示
