Vue Router
简介:Vue Router
是 Vue.js 官方的路由管理器,是一个核心插件,与 Vue.js 高度集成。
SPA
single page application(单页面应用程序),即在整个应用中,只有一个 html 页面,在用户与应用之间实现交互时能够动态更新页面内容。
前端路由
利用 hash或 history 改变不会向后端发起新的 html 请求
安装 Router 路由
在控制台输入指令:
$ npm i vue-router@3.5.3
# 或
$ yarn add vue-router@3.5.3
定义 VueRouter 对象
1.在项目src
文件夹中创建文件夹 router
,在文件夹内创建一个index.js
文件。
2.在刚才创建的 index.js 文件中定义 VueRouter
。
路由模式:
- hash:利用 URL 中
#hash
hash 值改变后,不会发送新的网络请求的特点,来实现的路由。使用如#/home
、#/login
类似的方式来表示所请求的前端 URL 资源。 - history:利用 h5 中 history 新增的 API
pushState()
、replaceState()
来实现。其路由的格式与服务端路由 URL 格式一致(比 hash 模式来说,没有多余的如#
之类的符号),所以,这种路由模式要用好,还需要服务端配置。
import Vue from 'vue' // 引入 Vue
import VueRouter from 'vue-router' // 引入 Vue-router 路由
import Home from '@/views/Home' // 引入要更新跳转的组件页面
import Login from '@/views/Login' // 引入要更新跳转的组件页面
// 使用路由插件
Vue.use(VueRouter)
// 创建 VueRouter 对象
const router = new VueRouter({
mode: 'hash'或者'history', // 路由模式,可取 hash、history,默认为 hash
routes: [ // 静态路由的配置信息
{
path: '/home', // 当 URL 中访问地址为 /home 时 自定义地址
component: Home, // 上面引入的要更新跳转的组件页面
},
{
path: '/login',
component: Login,// 上面引入的要更新跳转的组件页面
},
],
})
// 导出路由对象
export default router
注入 router 到 vue 根实例
**在main.js
文件内注入 router
// 引入 router
import router from './router'
new Vue({
router,
// render: h => h(App),
}).$mount('#app')
在 Vue 中使用 VueRouter
VueRouter 提供了两个内置组件:
在主页面使用以下两个组件,一个是用于跳转的链接,一个是用来渲染试图的。
router-link
:链接,相当于 <a>router-view
:视图,用于渲染访问路径所对应的组件
<template>
<div id="app">
<!-- 链接 -->
<router-link to="/home">首页</router-link>
<router-link to="/login">登录</router-link>
<button @click="todoJump">代办事项</button>
<!-- 视图 -->
<router-view></router-view>
</div>
</template>
编程式导航:
当在 Vue 根实例中注入了 router 后,在 vue 组件中会自动注入如下两个属性:
$router
:代表 VueRouter 对象实例$route
:代表的是当前激活的路由对象
使用主页面使用 methods
事件处理属性定义函数的方法实现跳转,定义一个事件处理函数用 $router
来访问路由示例就是获取跳转页面的链接地址,然后用在标签里使 v-on 来实现跳转
-
push()
这个方法会像向 history或者hash 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL(地址) -
replace()
它和push()
很想,唯一不同的是,它不会向 history或者hash 添加历史记录,而且和它的方法名一样替换掉,当前的 history 记录。 -
go(n)
这个方法的参数是一个整数,意思是在 history或者hash 记录中向前或者向后退多少步,括号里填写 负数或 正数。
export default {
name: 'App',
methods: {
todoJump () { // 编程式导航
this.$router.push('/Todo')
this.$router.replace('/Todo')
this.$router.go(n)
// 在浏览器记录中前进一步,等同于 history.forward()
this.$router.go(1)
// 后退一步记录,等同于 history.back()
this.$router.go(-1)
// 如果前进或后退的的步数大于浏览器的的历史记录,那就会默默的报错呗
this.$router.go(100)
}
}
}
代码示例:
<template>
<div id="app">
<!-- 链接 -->
<router-link to="/home">首页</router-link>
<router-link to="/login">登录</router-link>
<button @click="todoJump">代办事项</button>
<!-- 视图 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
methods: {
todoJump () { // 编程式导航
this.$router.push('/Todo')
}
}
}
</script>
路由传参
1. ?
传参
在字符串链接后面跟上 ? 然后接收参数,当点击跳转页面的时候,导航栏地址上会打印刚才传输的数据。
methods: {
todoJump () { // 编程式导航
this.$router.push('/Todo?id=5&titl=测试')
}
2.使用 query
和 params
查询字符串传参
- 在编程式导航中 用 query,在事件处理函数中定义要传递的对象数据。
它传递的数据也可以在导航栏地址后面打印出来。
methods: {
todoJump () { // 编程式导航
this.$router.push({
path: '/Todo',
query: { // 传递查询字符串参数
id: 100,
title: '测试',
price: 99.99,
amount: 99
}
})
}
- 在<router-link>标签内传参
首先在标签内部用query
定义传递的数据
<router-link :to="{ path:'/hon',query:{message:'篮网总冠军',content:'测试'}}">切换</router-link>
然后在跳转组件那边用 $route
使用传递的参数
注意: 可以直接用插值语法的方式调用,也可以用属性接收。
// 插值语法方式
<p>{{ $route.query.message }}</p>
<p>{{ $route.query.content }}</p>
// 属性接收方式
created(){
const msg = this.$rouet.query.message // 接收路由参数
- params 可以替换
query
传参,但必须是命名路由
// 在标签内定义传递的参数
<router-link :to="{ name:'Hello',params:{message:'篮网总冠军',content:'测试'}}">切换</router-link>
接收产生并渲染
注意: 在接收数据那边也要把方法换成 params
// 插值语法方式
<p>{{ $route.params.message }}</p>
<p>{{ $route.params.content }}</p>
// 属性接收方式
created(){
const msg = this.$rouet.params.message // 接收路由参数
3.在定义的静态路由中 path
属性后面使用 :id
来定义动态路径参数
{
path: '/Todo:id', // 使用 :id 来定义动态路径参数
name: 'Todo',
component: TodoApp
}
在显示页面定义事件处理函数内部用 params
属性来传递参数,写法如下。
methods: {
todoJump () { // 编程式导航
this.$router.push({
name: 'Todo',
params: { // 用刚才在路由定义的名字来传递参数
id: 100
}
})
}
}
它也可以在导航栏地址后面显示,也可以定义钩子函数,打印在控制台。