路由
vue-route是一个插件库
安装:npm i vue-router
使用:Vue.use(vue-route)
单页面应用
- 整个页面只有一个完整的页面
- 点击页面中的导航栏不会刷新,页面只会做局部更新
- 数据通过ajax请求获取
路由的理解
路由实质上是一对key:value
,对于vue来说key就是网址后面的路径如www.baidu.com/class
中的**/class**,value就是不同的页面组件或函数
前端路由:
- value是component,用于展示页面内容
- 工作过程:当浏览器的路径改变时,对应的组件就会显示
后端路由:
- value是function,用于处理客户提交的请求
- 工作工程:服务器接收到一个请求时,根据请求路径找到匹配的函数来处理请求,返回响应数据
基本使用
-
安装router
- 如果是vue3那么要使用router@4
- 如果是vue2那么要使用router@3
- npm i vue-router@3
-
修改main.js
//引入VueRouter插件 import VueRouter from 'vue-router' //引入路由器 import router from './router' new Vue({ //声明路由器 router:router, })
-
创建路由器文件
- 在src中创建路由器文件,在该文件夹中创建index.js文件
//这里的代码用来定义一个路由器 //引入VueRouter import VueRouter from 'vue-router' //引入组件 import About from '../components/About' import Home from '../components/Home' //创建并暴露router export default new VueRouter({ //写入路由 routes:[ { path:'/about', component:About }, { path:'/home', component:Home } ] })
-
在APP文件中使用路由
<template> <div> <!-- 和a标签类似,浏览器中会渲染成a标签--> <!-- to为path路径 --> <router-link to="/home">home</router-link> <router-link to="/about">about</router-link> <!-- 用于展示组件 --> <router-view></router-view> </div> </template>
命名路由
给路由命名的时候可以简化编码,在router-link标签中的path属性可以变为name
routers:[
{
name:'xiangqing',
path:'/about',
components:About
}
]
``
注意点:
-
路由组件:由路由器渲染的组件
一般组件:自己写标签的组件
开发中为了区分,会把这两种类型的组件分开放,路由组件放在pages,一般组件放在components
-
切换组件实质上是不断销毁挂载的过程,切换到下一个组件:先是上一个组件销毁,然后是下一个组件挂载
-
路由组件身上都有route和router属性,route不同,但是router都相同(只能有一个路由器)
嵌套路由(多级路由)
router配置
export default new VueRouter({
routes:[
{
//一级路由
p