第六讲路由的简单介绍

Fiki515

已于 2022-08-06 14:46:14 修改

阅读量523

点赞数

文章标签：前端 javascript vue.js

于 2022-08-06 14:45:40 首次发布

本文链接：https://blog.csdn.net/Fiki515/article/details/126192285

版权

本文详细介绍了Vue.js路由库vue-router的使用，包括下载、组件配置、路由配置、404页面设置、编程式路由跳转、路由信息获取、路由守卫和查询参数的传递与获取。重点讲解了<router-link>组件属性、普通路由配置及传参、路由信息的path、fullPath、params和query等关键概念。

摘要由CSDN通过智能技术生成

路由 vue-router

一、下载

二、组件

二、路由的配置：/router/index

（1)、普通路由配置

（2)、普通路由传参

三、404页面：404的path为*，配置在最后面

路由 vue-router

原理：地址发生变化，刷新页面，检测地址栏变化切换div更新视图 hash路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

一、下载

1、直接下载 / CDN

https://unpkg.com/vue-router/dist/vue-router.js

2. NPM ：推荐使用淘宝镜像：

npm install vue-router

二、组件

(1) <router-link> 相关属性

1、to:表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

2、replace：设置 replace 属性的话，当点击