开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第32天，点击查看活动详情
路由
路由其实就是一组映射关系（key-value）。其中key为路径，value可能就是function或组件。
路由的分类
路由分为前端路由和后端路由
1. 前端路由
前端路由中value是component，用于展示页面内容。
主要过程就是当浏览器的路径改变时，对应的组件就会展示。我们这里讲的路由也是指前端路由。
2. 后端路由
后端路由中的value是function，用于处理客户端提交的请求。
主要过程就是服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据。
路由的安装配置
1. 安装
npm install vue-router
这一步一定要注意安装的版本，使用这个命令一般安装的都是最新版本（现在的日期应该是4.x版本），如果我们是在vue2中使用vue-router的话，请使用下面的命令
npm i vue-router@3
在src下新建一个router文件夹，里面新建个index.js文件。
index.js文件内容如下：
// 路由配置文件
import VueRouter from 'vue-router';
import Home from '../components/myHome';
export default new VueRouter({
routes: [
{
// path是路径
path: "/home",
//跳转的组件
component: Home
},
]
})
在main.js中添加如下代码
import VueRouter from 'vue-router';
import router from './router';
Vue.use(VueRouter);
new Vue({
render: h => h(App),
store,
router
}).$mount('#app')
至此路由的简单配置就完成了，下面就可以使用路由了。
路由的简单使用
在讲路由的使用之前我们先来看两个标签，router-link和router-view。
router-link
router-link组件支持用户在具有路由功能的应用中点击导航。其中to属性指定路径。router-link最后默认被解析成a标签，如果你想要解析成别的标签，可以通过配置tag属性。当目标路由成功激活时，链接元素自动设置一个表示激活的CSS类名。
<router-link to="/home"></router-link>
router-link组件可以配置以下属性：
- to: 必传, 表示目标路由的链接。一般是我们配置的路由信息的path属性
- replace：布尔型，设置
replace属性的话，当点击时，会调用router.replace()而不是router.push()，于是导航后不会留下 history 记录。 - append： 布尔型，表示是否在当前相对路径前添加基路径，如果设置为true，to配置的是'/b'，表示的是'/a/b'，如果设置为false，就是'/b'
- tag: 配置router-link渲染成的某标签
- active-class：设置激活时使用的css类名。
- exact：布尔型。是否激活类名的依据是包含匹配。
- event: 声明可以用来触发导航的事件。
- exact-active-class: 配置当链接被精确匹配的时候应该激活的class
-
aria-current-value: 当链接根据精确匹配规则激活时配置的
aria-current的值.
router-view
router-view是一个视图组件，将路径匹配组件渲染出来。它除了搭配router-link来使用之外，它还可以搭配transition和keep-alive一起使用。
相比router-link的属性来说，router-view的属性比较简单，就一个name属性, 这个name属性是和组件的name属性相匹配的。
<router-view name="home"></router-view>
基本用法
1. 在app.vue里面配置
<template>
<div id="app">
<p>
<router-link to="/home">主页</router-link>
<router-link to="/about">关于</router-link>
</p>
<router-view></router-view>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</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>
2. 在router里面配置
// 路由配置文件
import VueRouter from 'vue-router';
import Home from '../components/myHome';
import About from '../components/about';
export default new VueRouter({
routes: [
{
// path是路径
path: "/home",
//跳转的组件
component: Home
},
{
// path是路径
path: "/about",
//跳转的组件
component: About
}
]
})
效果如下：
小结
这篇文章主要就是介绍一下路由的概念和简单的使用，由于路由里面内容很多，一篇文章介绍不完，后续我会将路由分成几个部分，分别详细介绍，敬请期待哦。
