如果耐不住寂寞，你就看不到繁华。
【23.Vue Router--路由】
[可以去官网看看Vue Router文档](入门 | Vue Router (vuejs.org))
- 用 Vue + Vue Router 创建单页应用非常简单：通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们。
00.知识铺垫
1）路由理解理解
- 一个路由（route）就是一组映射关系（key-value)
- 多个路由需要路由器（router）进行管理
- 路由的存在就是为了实现单页面应用
2)对spa应用的理解
- 单页Web应用
（single page web application, SPA） - 整个应用只有一个完整的页面
- 点击页面中的导航链接不会刷新页面，只会做页面的局部更新
- 数据需要通过ajax请求获取
01.路由的理解
什么是路由
- 一个路由就是一组映射关系
（key---value） - key为路径，value可能是function或Component
router和route
- router：中文直译是“路由器的意思”，简单来说就是路由（route）的管理者
- route：指的就是单个路由或者某一个路由
02.路由的分类
后端路由
- 理解：value是function，用于处理客户端提交的请求
- 工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据
前端路由
-
理解：value是component，用于展示页面内容
-
前端路由：key是路径，value是组件。
-
工作过程：当浏览器的路径改变时，对应的组件就会显示
-
作用：设定访问路径，并将路径和组件映射起来（就是用于局部刷新页面，不需要请求服务器来切换页面）。
03.路由的安装
路由的安装也是要要借助Vue脚手架，通过npm命令进行安装
值得注意的是：
一般安装vue-router会安装最新版本，而Vue-router最新版本为4，但Vue-router4只能在Vue3中使用，所以Vue2只能用Vue-router3
- 安装vue-router，命令：
npm i vue-router@3【vue2安装】
04.配置和使用路由
第一步
在src文件夹下创建router/index.js文件，并配置路由：
//该页面用于创建整个应用的路由管理者router
import VueRouter from "vue-router";
//引入对应的路由组件
import XXX from 'XXX'
import XXX from 'XXX'
//创建并暴露一个router
export default new VueRouter({
routes:[
{
path:'/跳转路径',
component:组件名称
},
{
path:'/跳转路径',
component:组件名称
},
]
})
第二步
在main.js中配置路由：
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'
//应用VueRouter
Vue.use(VueRouter)
//创建vm
new Vue({
el:'#app',
render: h => h(App),
router:router
})
第三步
在对应的组件中使用路由：
实现切换：
<!--使用 router-link 组件进行导航 -->
<!--通过传递 `to` 来指定链接 -->
<!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
<router-link to="/跳转路径">跳转</router-link>
active-class
首先 active-class 是 vue-router 模块中 router-link 组件中的属性，主要作用是用来实现选中
样式的切换，在 vue-router 中要使用 active-class 。
<router-link active-class="active" to="/跳转路径">跳转</router-link>
注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。
指定位置展示路由组件：
router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。
<!-- 指定组件的呈现位置 -->
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view> <router-view>
值得注意的几个点：
1.一般情况下，我们在使用路由时，用到的路由组件通常会在src文件夹下新创建一个名为pages的文件夹来存放路由组件，而一般的组件则放在components中。
2.路由组件在被切换时，原本的路由是已经被销毁了的，只有再次点击对应的导航或路由切换按钮，则该路由组件才会再次被挂载。
3.每个路由组件都有自己的$route属性，里面存储该路由组件的信息。
4.一个应用只有一个$router属性，用于管理所有路由。
具体实例代码
创建路由组件文件：src/pages/xxx.vue.
About.vue:
<template>
<h2>我是About的内容</h2>
</template>
<script>
export default {
name: 'About',
};
</script>
<style scoped>
h2 {
background-color: rgb(75, 210, 138);
}
</style>
Home.vue:
<template>
<h2>我是Home的内容</h2>
</template>
<script>
export default {
name: 'Home',
}
</script>
<style scoped>
h2{
background-color: rgb(233, 175, 226);
}
</style>
创建路由配置文件src/router/index.js
// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
//创建并暴露一个路由器
export default new VueRouter({
// 定义一些路由
// 每个路由都需要映射到一个组件。
routes: [
//配置路由路径和路由组件
{
path: '/about',
component: About, //要跳转到的组件
},
{
path: '/home',
component: Home,
}
]
})
在main.js中配置路由：
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入VueRouter
import VueRouter from "vue-router";
//引入路由器
import router from "./router";
//关闭Vue的生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)
//创建vm
new Vue({
el:'#app',
render: h => h(App),
// property 简写 (用在对象某个 property 的 key 和被传入的变量同名时)
router, //配置router
mounted() {
console.log(this);
},
})
在app.vue中展示路由视图：
<template>
<div>
<div class="row">
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header"><h2>Vue Router Demo</h2></div>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<!-- 原始html中我们使用a标签实现页面的跳转 -->
<!-- <a class="list-group-item active" href="./about.html">About</a> -->
<!-- <a class="list-group-item" href="./home.html">Home</a> -->
<!-- Vue中借助router-link标签实现路由的切换 -->
<router-link
class="list-group-item"
active-class="active"
to="/about">About</router-link>
<router-link
class="list-group-item"
active-class="active"
to="/home">Home</router-link>
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<!-- 指定组件的呈现位置 -->
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:'App',
}
</script>
public/index.html
<!DOCTYPE html>
<html lang="zh-en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 引入第三方样式库 -->
<link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
