1、相关理解
1.1 vue-router的理解
vue的一个插件库,专门用来实现SPA应用的
1.2 对SPA应用的理解
1、单页Web应用(single page web application,SPA)
2、整个页面只有一个完整的页面。index.html
3、点击页面中的导航链接不会刷新页面,只做页面的局部更新
4、数据需要通过ajax请求获取
1.3 路由的理解
1、理解:一个路由(route)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理。
2、前端路由:key是路径,value就是组件
2、基本使用
1、安装vue-router,命令:npm i vue-router
以vue2项目为例【注意:vue-router4,只能用在vue3中,vue-router3,才能用在vue2中】
npm i vue-router@3
2、应有插件:Vue.use(VueRouter)
3、src下新建router文件夹,编写route配置项
import Vue from 'vue' import VueRouter from 'vue-router' // 引入VueRouter Vue.use(VueRouter) // 应用插件 // 引入组件 import About from '../package/About' import Home from '../package/Home' // 编写配置项 const router = new VueRouter({ routes: [ { path: '/about', component:About, }, { path: '/home', component:Home, } ] }) export default router
4、在main.js中引入router
... // 引入路由 import router from './router/index' ... new Vue({ ... router, // 使用路由 ... render: h => h(App), }).$mount('#app')
5、在组件中使用
<template> <div id="app"> <!-- 实现切换 (active-class可以配置高亮样式) --> <router-link active-class="active" to="/home">Home</router-link> <router-link active-class="active" to="/about">About</router-link> <!-- 指定展示位置 --> <router-view class="container"></router-view> </div> </template>
3、几个注意点
1、路由组件通常存放在pages文件夹,一般组件通常存放在components文件夹
2、通过路由切换.''隐藏'了的路由组件,默认是被销毁掉的,需要的时候再去挂载
3、每个组件都有自己的$route属性,里面存储着自己的路由信息
4、整个应用只有一个router,可以通过组件的$router属性获取到。
标签:基本,Vue,vue,VueRouter,组件,router,路由 From: https://www.cnblogs.com/hyt09/p/17468781.html