admin管理员组文章数量:1633930
一、什么是前端路由
1.1 vue-router 的理解
vue-router是vue .js官方提供的一套专用的路由插件库,专门用来实现 SPA 应用。
1.2 对 SPA 应用的理解
- 单页 Web 应用(single page web application,SPA)。
- 整个应用只有一个完整的页面。
- 点击页面中的导航链接不会刷新页面,只会做页面的局部更新。
- 数据需要通过 ajax 请求获取。
1.3 什么是路由
一个路由就是一组映射关系(key - value),key 为路径, value 可能是 function 或 component。前端路由的value 是 component(组件),用于展示页面内容,当浏览器的key(路径)改变时, 对应的组件即页面内容就会相应改变进行页面显示。
路由器与路由之间的关系图
1.4 前端路由的使用场景
网站首页界面:
登录界面:
总结:前端路由在访问一个新页面时仅仅改变了一下路径,没有网络延迟、页面无刷新,单页面应用。
二、Vue Router 基本使用
Vue.js官方提供了一套专用的路由工具库Vue Router。由于Vue Router是Vue的一个插件,需要在Vue的全局应用中通过Vue.use( )将它纳入Vue实例中。
2.1 建立路由器模块
在vue-cli创建的项目中,router文件夹下的index.js中配置和绑定相关信息。new Router命令创建一个路由对象,一条路由的实现需要三个部分:name(路由名字),path(路径),component(组件)。
路由配置示例代码(index.js):
import Vue from 'vue'
import Router from 'vue-router'
//将HelloWorld组件引入
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
2.2 启动路由器
在vue-cli脚手架创建的项目中,main.js是入口文件,并启动路由器。
main.js代码截图:
App.vue中使用<rouer-view/>将组件渲染在页面中:
2.3 路由重定向
项目应用中通常都有一个首页,默认首先打开的是首页,目前我们默认首先打开的地址是http://localhost:8080/#/
我们想要改变这个默认地址,让它默认打开的是首页,http://localhost:8080/#/home,我们可以使用路由重定向完成。
export default new Router({
routes: [
{
path:'/',
//路由重定向第一种方式
redirect:'/home'
//路由重定向第二种方式
// redirect:{name:'Home'}
//路由重定向第三种方式
// redirect:to=>{return 'Home';}
},
{
path:'/home',
name:'Home',
component:Home
},
2.4 路由懒加载
路由懒加载方式:能把不同路由对应的组件分割成不同的代码块,当路由被访问时才加载对应路由,比较高效。语法(例如加载School路由组件):
const School=()=>import('../components/School.vue')
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Student from '@/components/Student'
// 路由普通加载方式
// import School from '@/components/School'
//路由懒加载方式:能把不同路由对应的组件分割成不同的代码块,当路由被访问时才加载对应路由,比较高效
const School=()=>import('../components/School.vue')
2.5 <router-link> 属性详解
<router-link>
组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址,默认渲染为带有正确连接的<a>
标签在页面显示。
to 属性:类型string/location
表示目标路由的链接,该值可以是一个字符串,也可以是动态绑定的描述目标位置的对象。有四种写法,建议用字符串写法,很简单方便。
<!-- 字符串 -->
<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: 'Home' }">Home</router-link>
2.6 路由传参
2.6.1 路由的query参数
1.传递参数
<router-link to="/student?id=666&title=你好" > 学生管理 </router-link>
2.接收参数
<template>
<div class="stu">
<!-- 获取query携带的参数 -->
<p>id:{{$route.query.id}},title:{{$route.query.title}}</p>
</div>
</template>
2.6.2 路由的params参数
1. 配置路由,声明接收params参数
{
path:'/student/:id/:title', //使用占位符声明接收params参数
name:'Student',
component:Student
}
2. 传递参数
<router-link to="/student/666/你好">学生管理</router-link>
3.接收参数
<template>
<div class="stu">
<!-- 获取params携带的参数 -->
<p>id:{{$route.params.id}},title:{{$route.params.title}}</p>
</div>
</template>
2.6.3 路由对象属性
控制台打印route对象属性:
this.$route.path
类型: string
字符串,对应当前路由的路径,总是解析为绝对路径,如 "/foo/bar"。
this.$route.params
类型: Object
一个 key/value 对象,包含了动态片段和全匹配片段,如果没有路由参数,就是一个空对象。
this.$route.query
类型: Object
一个 key/value 对象,表示 URL 查询参数。例如,对于路径 /foo?user=1,则有 this.$route.query.user == 1,如果没有查询参数,则是个空对象。
this.$route.hash
类型: string
当前路由的 hash 值 (带 #) ,如果没有 hash 值,则为空字符串。
this.$route.fullPath
类型: string
完成解析后的 URL,包含查询参数和 hash 的完整路径。
this.$route.matched
类型: Array<RouteRecord>一个数组,包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是 routes 配置数组中的对象副本 (还有一些在 children 数组)。
更多路由属性查看官网:API 参考 | Vue Router (vuejs)https://router.vuejs/zh/api/#component-injected-%E5%B1%9E%E6%80%A7
三、路由的跳转(页面间导航)
3.1 导航到不同的位置(router.push)
注意:在 Vue 实例中,你可以通过 $router
访问路由实例。因此你可以用 this.$router.push
。
想要导航到不同的 URL,可以使用 router.push
方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,会回到之前的 URL。
当你点击 <router-link>
时,内部会调用这个push方法,所以点击 <router-link :to="...">
相当于调用 router.push(...)
:
// 字符串路径
router.push('/users/eduardo')
// 带有路径的对象
router.push({ path: '/users/eduardo' })
由于属性 to
与 router.push
接受的对象种类相同,所以两者的规则完全相同。
3.2 替换当前位置(router.replace)
它的作用类似于 router.push
,唯一不同的是,它在导航时不会向 history 添加新记录,正如它的名字所暗示的那样——它取代了当前的条目。
也可以直接在传递给 router.push
的 routeLocation
中增加一个属性 replace: true
:
router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })
3.3 横跨历史(router.go)
采用一个整数作为参数,表示在历史堆栈中前进或后退多少步,类似 window.history.go(n)
例如:
// 向前移动一条记录,与 router.forward() 相同
router.go(1)
// 返回一条记录,与router.back() 相同
router.go(-1)
// 前进 3 条记录
router.go(3)
// 如果没有那么多记录,静默失败
router.go(-100)
router.go(100)
总结:
router.push
和 router.replace
都是路由跳转,区别在于 router.push
会产生历史记录。
版权声明:本文标题:VUE.js的路由(vue-router)及基本使用 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1729177565a1188909.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论