vue路由笔记
vue路由笔记路由1. 安装2. 入门2.1 根组件2.2 创建组件2.3 编写路由2.4 挂载路由2.5 使用路由2.6 route 和 router 的区别3. 路由模式3.1 hash模式3.2 history模式4. 命名路由4.1 介绍4.2 使用5. 编程式导航5.1 字符串模式5.2 对象模式5.3 命名路由模式5.4 替换当前位置5.4.1 router-link5.4.2 编程式
vue路由笔记
路由
1. 安装
执行如下命令来安装
npm install vue-router@4
2. 入门
用 Vue + Vue Router 创建单页应用非常简单:通过 Vue.js,我们已经用组件组成了我们的应用。当加入 Vue Router 时,我们需要做的就是将我们的组件映射到路由上,让 Vue Router 知道在哪里渲染它们。下面是一个基本的例子:
2.1 根组件
<template>
<button @click="showLoading">切换</button>
<h3>根组件</h3>
</template>
2.2 创建组件
我们以登录和注册组件为例来演示路由的使用。我们在 components 目录下新建 Login.vue 和 Register.vue 两个组件
Login.vue
<template>
<h3>Login</h3>
</template>
<script setup lang="ts">
</script>
Register.vue
<template>
<h3>Register</h3>
</template>
<script setup lang="ts">
</script>
2.3 编写路由
我们在 src 目录下新建一个叫 router 的目录,然后在这个目录下新建一个 index.ts 文件。
import {createRouter, createWebHashHistory, RouteRecordRaw} from "vue-router";
// 配置路由映射
const routes: Array<RouteRecordRaw> = [
{
path: '/', // 指定请求的路径
component: () => import('../components/Login.vue')
},
{
path: '/register',
component: () => import('../components/Register.vue')
}
]
// 创建路由对象
const router = createRouter({
history: createWebHashHistory(), // 历史记录
routes // 路由的映射
})
// 导出路由,便于挂载
export default router
2.4 挂载路由
我们需要在 main.ts 入口文件中通过 use() 方法来进行挂载
import { createApp } from 'vue'
import App from './App.vue'
// 引入
import loading from './loading'
import router from './router'
// 注册插件
createApp(App).use(router).use(loading).mount('#app')
2.5 使用路由
我们在根组件中来使用路由,需要使用 <router-view></router-view>
来进行路由的展示。
现在我们可以看到登录的组件了,但是我们还希望有一个链接可以随时切换。这时就需要使用 <router-linke></router-linke>
标签来指定链接。
<template>
<button @click="showLoading">切换</button>
<h3>根组件</h3>
<router-link to="/">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</template>
router-link
标签中有一个必须的属性叫 to
,它是用于指定链接的跳转路径,它的值与路由配置中的 path
属性的值相同。
2.6 route 和 router 的区别
route 是一个对象,它表示当前路由信息,包括当前 URL 解析得到的信息,如:当前路径、请求参数、query对象等。
router 也是一个对象,它表示全局的路由实例,是路由的构造方法的实例。它包括向路由中添加路由地址、命名路由等。
3. 路由模式
3.1 hash模式
默认情况下,Vue 中使用的路由是 HashHistory 方式,这种方式会在浏览器地址栏中以 #/
的方式来显示。它其实使用的是 location.hash
的方式。
3.2 history模式
history 提供了 pushState
和 replaceState
两个方法,这两个方法改变 URL 的 path
部分不会引起页面刷新。
history 提供了类似 hashchange 事件的 popstate
事件,但 popstate 事件有些不同:
- 通过浏览器前进后退改变 URL 时会触发 popstate 事件
- 通过
pushState/replaceState
或<a>
标签改变 URL 不会触发 popstate 事件 - 可以拦截
pushState/replaceState
的调用和<a>
标签的点击事件来检测 URL 变化 - 通过 JS 调用
history
的back
、go
和forward
方法触发该事件
4. 命名路由
4.1 介绍
除了可以使用 path
来指定路由地址外,还可以使用 name
来指定。它有以下几个优点:
- 没有硬编码的 URL
params
的自动编码/解码。- 防止你在 url 中出现打字错误。
- 绕过路径排序(如显示一个)
4.2 使用
要想使用命令路由,我们只需要在路由配置文件中的映射部分添加 name
属性,并指定名称即可。
const routes: Array<RouteRecordRaw> = [
{
path: '/', // 指定请求的路径
name: 'login',
component: () => import('../components/Login.vue')
},
{
path: '/register',
name: 'register',
component: () => import('../components/Register.vue')
}
]
然后在 <router-link to=""></router-link>
标签中的 to
属性来以对象的方式使用 name
属性。
<template>
<button @click="showLoading">切换</button>
<h3>根组件</h3>
<router-link :to="{name: 'login'}">登录</router-link>
<router-link :to="{name: 'register'}">注册</router-link>
<router-view></router-view>
</template>
注意:使用命名路由时,
to
属性需要进行v-bind
绑定,才能够识别对象中的name
属性。
5. 编程式导航
除了使用 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。
5.1 字符串模式
我们在 App.uve 中使用这种模式来进行演示。
<template>
<button @click="toPage('/')">登录</button>
<button @click="toPage('/register')">注册</button>
<router-view></router-view>
</template>
<script setup lang="ts">
import {useRouter} from 'vue-router'
const router = useRouter()
const toPage = (url: string) => {
router.push(url)
}
</script>
5.2 对象模式
我们还可以给 push() 方法指定一个对象。例如:
const router = useRouter()
const toPage = (url: string) => {
router.push({ // 对象模式
path: url
})
}
5.3 命名路由模式
除了上面二种方式外,我们还可以使用命名路由模式。
首先我们需要修改 <router-link>
标签中的 to
属性,让的地址变为路由配置中的 name
属性的值。
<template>
<button @click="toPage('login')">登录</button>
<button @click="toPage('register')">注册</button>
<router-view></router-view>
</template>
然后修改 push() 方法中对象中的属性为 name
:
const router = useRouter()
const toPage = (url: string) => {
// 命名路由模式
router.push({
name: url
})
}
如果 path 和 name 属性都同时指定,那么优先使用的是 name 属性。也就是说,优先使用命名路由模式。
5.4 替换当前位置
当不希望保留历史记录时,可以采用 replace
进行页面的跳转,同时也会创建渲染新的 Vue 组件,但是在 history
中其不会重复保存记录,而是替换原有的 vue 组件:
5.4.1 router-link
<template>
<router-link replace to="/">登录</router-link>
<router-link replace to="/register">注册</router-link>
<router-view></router-view>
</template>
5.4.2 编程式导航
const toPage = (url: string) => {
router.replace(url)
}
5.4.3 横跨历史
该方法采用一个整数作为参数,表示在历史堆栈中前进或后退多少步,类似于 window.history.go(n)。
为了演示这个效果,我们先修改 App.vue 中的 template 部分:
<template>
<button @click="showLoading">切换</button>
<h3>根组件</h3>
<router-link to="/">登录</router-link>
<router-link to="/register">注册</router-link>
<button @click="next">前进</button>
<button @click="prev">后退</button>
</template>
然后在实现功能:
const router = useRouter()
const next = () => {
router.go(1)
}
const prev = () => {
router.back()
}
更多推荐
所有评论(0)