这是我参与11月更文挑战的第17天，活动详情查看：2021最后一次更文挑战

VueRouter_基础

什么是路由？

路由是根据不同的url地址展现不同的内容或页面。早期的路由都是后端直接根据url来重载页面实现的，即后端控制路由。后来页面越来越复杂，服务器压力越来越大，随着ajax（异步刷新技术）的出现，页面的实现非重载就能刷新数据，让前端也可以控制url自行管理，前端路由由此而生。

Vue路由是指根据url分配到对应的处理程序；作用就是解析URL，调用对应的控制器（的方法，并传递参数）。Vue路由有助于在浏览器的URL或历史记录与Vue组件之间建立链接，从而允许某些路径渲染与之关联的任何一个视图。

什么时候使用前端路由？

前端路由更多用在单页应用上，也就是SPA(Single Page Web Application)，在单页面应用中，大部分页面结果不变，只改变部分内容的使用。

安装路由

安装：npm install vue-router。

使用路由

JavaScript

引入路由

import VueRouter from 'vue-router';

使用路由

Vue.use(VueRouter);

定义路由组件

 // 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

定义路由

 // 每个路由应该映射一个组件
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

创建 router 实例，然后传 routes 配置

const router = new VueRouter({
  routes 
})

创建和挂载根实例

const app = new Vue({
  router
}).$mount('#app')

html

<div id="app">
  <h1>Hello App!</h1>
  <p>
     <!-- 使用 router-link 组件来导航. --> 
     <!-- 通过传入 `to` 属性指定链接. --> 
     <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> 
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
   <!-- 路由出口 --> 
   <!-- 路由匹配到的组件将渲染在这里 --> 
  <router-view></router-view>
</div>

router-link class

router-link-exact-active 当前展示路径完全匹配组件to属性的值
router-link-active 当前展示路径包含to属性的值

更改class名

VueRouter({
  linkActiveClass: 'link-active',
  linkExactActiveClass: 'link-exact-active',
})

最后

如果对您有帮助，希望能给个👍评论/收藏/三连！

博主为人老实，无偿解答问题哦❤

【快速入门Vue系列】第三十篇：初识Vue路由，基本使用