当前位置：首页 > news >正文

Vue-Route

news 2025/7/10 0:49:30

一、相关理解

1. vue-router的理解

vue的一个插件库，专门用来实现SPA应用

2. 对SPA应用的理解

单页Web应用
整个应用只有一个完整的页面
点击页面中的导航链接不会刷新页面，只会做页面的局部更新
数据需要通过ajax请求获取

3. 路由的理解

什么是路由

一个路由是一组映射关系（key-value）
多个路由需要经过路由器的管理
前端路由：key是路径，value是组件

路由的分类

后端路由：
a. 理解：value是function，用于处理客户端提交的请求
b. 工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据
前端路由
a. 理解：value是component，用于展示页面内容
b. 工作过程：当浏览器的路径改变时，对应的组件就会显示

二、基本使用

安装vue-router，命令：npm i vue-router
应用插件：vue.use(VueRouter)
编写router配置项

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
import About from '../components/About'
import Home from '../components/Home'// 创建并暴露一个路由器
export default new VueRouter({routes:[{path:'/about',component: About},{path:'/home',component: Home}]
})

实现切换（active-class可配置高亮样式）

<router-link active-class="active" to="/about">About</router-link>
<router-link active-class="active" to="/home">Home</router-link>

指定展示位置

<!-- 指定组价的呈现位置 -->
<router-view></router-view>

三、几个注意点

路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹
通过切换，"隐藏"了的路由组件，默认是被销毁掉的，需要的时候再去挂载
每个组件都有自己的$route属性，里面存储着自己的路由信息
整个应用只有一个router，可以通过组件的$router属性获取到

四、嵌套（多级）路由

配置路由规则，使用children配置项

routes:[{path:'/about',component: About},{path:'/home',component: Home,children:[ // 通过children配置子级路由{path:'news',  // 此处一定不要写 '/news'component: News},{path:'message', // 此处一定不要写 '/message'component: Message}]}
]

跳转（要写完整路径）

<router-link to="/home/news">News</router-link>

五、路由传参

传递参数

<!-- 跳转路由并携带query参数，to的字符串写法 -->
<router-link :to="`/home/message/detail?id=${ m.id }&title=${ m.title }`">{{ item.title }}</router-link>
// <!-- 跳转路由并携带query参数，to的对象写法 -->
<router-link :to="{path:'/home/message/detail',query:{id: item.id,title: item.title}}"
>{{ item.title }}</router-link>

接收参数

$route.query.id
$route.query.title

六、命名路由

作用：可以简化路由的跳转
如何使用
a. 给路由命名：

{path:'/home',component: Home,children:[{path:'news',component: News},{path:'message',component: Message,children:[{name: 'xiangqing',  // 给路由命名path:'detail',component: Detail}]}]
}

简化跳转

<!-- 简化前，需要写完整的路径 -->
<router-link :to="{ path:'/home/message/detail'}">{{ item.title }}</router-link> 
<!-- 简化后，直接通过名字跳转 -->
<router-link :to="{name: 'xiangqing'}">{{ item.title }}</router-link>
<!-- 简化写法配合传参 -->
<router-link :to="{name: 'xiangqing',query:{id: item.id,title: item.title}
}">{{ item.title }}</router-link>

七、路由的params参数

配置路由，声明接受params参数

{path:'/home',component: Home,children:[{path:'news',component: News},{path:'message',component: Message,children:[{name: 'xiangqing',path:'detail/:id/:title',  // 使用占位符声明接受params参数component: Detail}]}]
}

传递参数

<!-- 跳转路由并携带parmas参数，to的字符串写法 -->
<router-link :to="`/home/message/detail/${item.id}/${item.title}`">{{ item.title }}</router-link><!-- 跳转路由并携带params参数，to的对象写法 -->
<router-link :to="{name: 'xiangqing',// path:'/home/message/detail',params:{id: item.id,title: item.title}}">{{ item.title }}</router-link>

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置
3. 接收参数

$route.params.id
$route.params.title

八、路由的props配置

作用：让路由组件更方便的收到参数

{name: 'xiangqing',path: 'detail/:id/:title',component: Detail,// props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail,,用的非常少props: {a:1, b:'hello'}// props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detailprops: true// props的第三种写法，值为函数props({$route}){return {id: $route.query.id,title: $route.query.title}}
}

九、router-link的replace模式

作用：控制路由跳转时操作浏览器李世记录的模式
浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录，路由跳转时候默认为push
如何开启replace模式：<router-link replace . . . .>News</router-link>

十、编程式路由导航

作用：不借助实现路由跳转，让路由跳转更加灵活
具体编码：

methods: {pushShow(item) {this.$router.push({name: "xiangqing",query: {id: item.id,title: item.title,},});},replaceShow(item) {this.$router.replace({name: "xiangqing",query: {id: item.id,title: item.title,},})}
},this.$router.go(1);  // 可前进也可后退this.$router.back()  // 后退this.$router.forward()  // 前进

十一、缓存路由组件

作用：让不展示的路由组件保持挂载，不被销毁
具体编码：

<keep-alive include="News">  // News组件名<router-view></router-view>
</keep-alive>

十二、路由守卫

作用：对路由进行权限控制
分类：全局守卫、独享守卫、组件内守卫

1. 全局守卫

// 全局前置路由守卫---> 每当路由跳转之前，会调用这个函数
router.beforeEach((to, from, next) => {console.log('beforeEach')if (to.meta.isAuth) {  // 判断是否需要鉴权if (localStorage.getItem('school') === 'atHIST') { // 权限控制的具体规则next()} else {alert('学校名不对，无权访问')}} else {next()  // 放行}
})// 全局后置路由守卫---> 每当路由跳转之后，会调用这个函数
router.afterEach((to, from) => {document.title = to.meta.title   // 修改网页的titleconsole.log('后置路由守卫');
})

2. 独享路由守卫

beforeEnter: (to, from, next) => {console.log('beforeEnter');if (to.meta.isAuth) {  // 判断是否需要鉴权if (localStorage.getItem('school') === 'atHIST') {next()} else {alert('学校名不对，无权访问')}} else {next()}
}

3. 组件内路由守卫

<!-- 进入守卫，通过路由规则，进入该组件时被调用 -->
beforeRouteEnter(to, from, next) {console.log('beforeRouteEnter');if (to.meta.isAuth) {// 判断是否需要鉴权if (localStorage.getItem("school") === "atHIST") {next();} else {alert("学校名不对，无权访问");}} else {next();}next();
},
//离开守卫，通过路由规则，离开该组件时被调用beforeRouteLeave(to, from, next) {console.log('beforeRouteLeave');next()},