目录
一、初识vue-router
1.什么是vue-router?
vue 的一个插件库,专门用来实现 SPA 应用
2.对SPA应用的理解
(1). 单页 Web 应用(single page web application,SPA)。
(2). 整个应用只有一个完整的页面。
(3). 点击页面中的导航链接不会刷新页面,只会做页面的局部更新。
(4). 数据需要通过ajax 请求获取。
3.对路由的理解
(1).什么是路由?
1. 一个路由就是一组映射关系(key - value)
2. key 为路径, value 可能是function 或component
(2).路由分类
1. 后端路由:
1) 理解:value 是function, 用于处理客户端提交的请求。
2) 工作过程:服务器接收到一个请求时, 根据请求路径找到匹配的函数
来处理请求, 返回响应数据。
2. 前端路由:
1) 理解:value 是component,用于展示页面内容。
2) 工作过程:当浏览器的路径改变时, 对应的组件就会显示。
二、路由的基本使用
1.安装vue-router,命令
npm i vue-router
2.应用插件
Vue.use(VueRouter)
3.编写router配置项
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入路由组件
import About from '../components/About'
import Home from '../components/Home'
//创建router实例对象,去管理一组一组的路由规则
const router = new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
},
]
})
//暴露router
export default router
4.实现切换
<!-- 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>
5.指定展示位置
<router-view></router-view>
6.几个注意点
1.路由组件通常存放在 pages 文件夹里,一般组件通常存放在 components 文件夹
2.通过切换,“隐藏”了的路由组件,默认是被销毁掉的,需要的时候再去挂载
3.每个组件都有自己的 $route 属性,里面存储着自己的路由信息
4.整个应用只有一个 router ,可以通过组件的 $router 属性获取到
三、多级路由(嵌套路由)
1.配置路由规则,使用children配置项
routes:[
{
path:'/about',
component:About,
},
{
path:'/home',
component:Home,
children:[ //通过children配置子级路由
{
path:'news', //此处一定不要写:/news
component:News
},
{
path:'message', //此处一定不要写:/message
component:Message
},
]
},
]
2.跳转
要写完整路径
<router-link to="/home/message">Message</router-link>