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

VueRouter_基础

什么是路由？

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

什么时候使用前端路由？

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

安装路由

安装：npm install vue-router。

使用路由

JavaScript

1. 引入路由

js import VueRouter from 'vue-router';

1. 使用路由

js Vue.use(VueRouter);

1. 定义路由组件

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

1. 定义路由

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

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

js const router = new VueRouter({ routes })

1. 创建和挂载根实例

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

html

```html

```

router-link class

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

更改class名

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

最后

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

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