Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。
Vue Router 属于前端路由,可以通过不同的URL访问不同的页面, 也可以实现在不刷新单页的情况下进行多视图管理。
1、安装:
在vue3版本下: npm install vue-router@4
在vue2版本下: npm install vue-router@3
或者 :npm install vue-router --save
2、 创建页面
现在建立两个页面,(正常项目中先建立页面),一个是登录页面login.vue,一个是首页页面home.vue
login.vue
<template>
<div>
<h2>你好这是登录页</h2>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>
home.vue
<template>
<div>
<h2>你好这是首页</h2>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped></style>
编写完页面之后 , 可以将这些页面地址配置到路由配置文件中。
3、在src目录下新增文件夹router ,在router文件夹下增加路由配置文件index.ts,然后保存
路由页面的映射信息在此配置。
//路由配置项文件
//引入路由对象
import { createRouter, createWebHistory, createWebHashHistory, createMemoryHistory, RouteRecordRaw } from 'vue-router'
//vue2 mode history vue3 createWebHistory
//vue2 mode hash vue3 createWebHashHistory
//vue2 mode abstact vue3 createMemoryHistory
//路由数组的类型 RouteRecordRaw
// 定义一些路由
// 每个路由都需要映射到一个组件。
const routes: Array<RouteRecordRaw> = [{
path: '/',
component: () => import('../components/login.vue')
},{
path: '/home',
component: () => import('../components/home.vue')
}]
const router = createRouter({
history: createWebHistory(),
routes
})
//导出router
export default router
4、在主程序入口 main.ts文件中引入路由配置文件并挂载
注意:引入的路由配置属性名称为 路由配置文件中导出的路由对象名称
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router' //导入路由配置文件
//挂载路由配置文件
createApp(App).use(router).mount('#app')
router-link和router-view
router-link:
我们没有使用常规的 a
标签,而是使用一个自定义组件 router-link
来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL,处理 URL 的生成以及编码。我们将在后面看到如何从这些功能中获益。
router-view:
将显示与 url 对应的组件。你可以把它放在任何地方,以适应你的布局。
router-link的其他属性:
router-link 默认会渲染成 a 标签,但是有时候你想渲染成别的标签也是可以的。
to属性
表示目标路由的链接,该值可以是一个字符串,也可以是动态绑定的描述目标位置的对象
<!-- 字符串 -->
<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>
tag 属性
tag属性是用来设置 router-link 标签渲染类型的,如我们想把 router-link 渲染成 button,如:
<router-link to="/home" tag="button">首页</router-link>
查看渲染后的元素,发现变成 button 标签了,对应的 to 添加的属性值就会失效。此时点击无法跳转到对应内容,可继续阅读下边跳转方式。 除了 button ,tag 的属性值还可以是其他任意标签,router-link 自动渲染成对应的标签。 replace 属性 replace与 history 模式中的 replaceState 对应,会调用 router.replace() 而不是router.push(),跳转的时候不会留下 history 记录,指定replace 的情况下,不能返回上一页。
<router-link to="/home" replace>首页</router-link>
active-class
active-class 设置 router-link 点击当前选中的类名,默认情况下类名为:router-link-active
<a href="#/"
aria-current="page"
class="router-link-exact-active router-link-active">
首页
</a>
设置当前元素样式需要设置到:router-link-active。 设置 active-class ,如:
<router-link to="/" active-class="active">首页</router-link>
// router-link-active 类名会被替换成 active
如果需要把全局的 router-link 的选择类名都修改成自定义的,一个一个单独设置工作量太大,可以在 router 中统一设置。
const router=new VueRouter({
routes,
mode: 'hash',
linkActiveClasss: 'active' //统一设置类名
})
App.Vue中的代码
<script setup lang="ts">
</script>
<template>
<div>
<!-- <login></login> -->
<h1>路由 Demo1</h1>
<router-link to="/" tag="div">登录</router-link>
<router-link to="/home" tag="div" style="margin-left:40px">首页</router-link>
<hr/>
<div>
<router-view></router-view>
</div>
</div>
</template>
<style scoped>
</style>
路由方法:
1、push()
// 字符串
this.$router.push('home')
// 对象
this.$router.push({ path: 'home' })
// 命名的路由 变成 /user/123
this.$router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数,变成 /register?plan=123
this.$router.push({ path: 'register', query: { plan: '123' }})
注意:push方法的跳转会向 history 栈添加一个新的记录,当我们点击浏览器的返回按钮时可以看到之前的页面。
2、go()
// 页面路由跳转 前进或者后退
this.$router.go(-1) // 后退
3、replace()
push方法会向 history 栈添加一个新的记录,而replace方法是替换当前的页面,
不会向 history 栈添加一个新的记录
一般使用replace来做404页面
this.$router.replace(’/’)