生活中的路由:设备和ip的映射关系
路由就是一种映射关系
Vue中路由:路径和组件的映射关系,根据路由就能知道不同路径的,应该匹配渲染哪个组件
VueRouter的介绍
作用:修改地址栏路径时,切换显示匹配的组件
说明:Vue官方的一个路由插件,是一个第三方包
官网:https://v3.router.vuejs.org/zh/
VueRouter的使用(5+2)
5个基础步骤(固定)
1)下载:下载VueRouter模块到当前工程,版本3.6.5
Vue2->VueRouter3.x Vuex3.x
Vue3->VueRouter4.x Vuex4.x
在终端中输入
yarn add vue-router@3.6.5
2)引入
import VueRouter from 'vue-router'
3)安装注册
Vue.use(VueRouter)//VueRouter插件初始化
4)创建路由对象
const router=new VueRouter()
5)注入,将路由对象注入到new Vue实例中,建立关联
new Vue({
render:h=>h(App),
router
}).$mount('#app')
2个核心步骤
1)在src文件夹下创建需要的组件(views目录),配置路由规则
views视图
错误信息:
错误原因:文件名称单一
解决方式:在组件文件中重命名name,或者本身就把文件名写成多单词命名
export default {
name: "MyFriend",
};
在main.js中配置
import Find from './views/Find.vue'
import MyMusic from './views/MyMusic.vue'
import Friend from './views/Friend.vue'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{ path: '/find', component: Find },
{ path: '/mymusic', component: MyMusic },
{ path: '/friend', component: Friend }
]
})
2)配置导航,配置路由出口(路径匹配的组件显示的位置)
<div class="footer_wrap">
<a href="#/find">发现音乐</a>
<a href="#/mymusic">我的音乐</a>
<a href="#/friend">朋友</a>
</div>
<div class="top">
<router-view></router-view>//页面切换的位置
</div>
组件存放目录问题(组件分类)
组件分类:.vue文件分2类;页面组件&复用组件
分类开来更易维护
1)src/views文件夹:页面组件-页面展示-配合路由使用
2)src/components文件夹:复用组件-展示数据-常用于复用
路由的封装抽离
目标:将路由模块抽离出来。
好处:拆分模块,利于维护
在index.js中除了router相关转移过去的,还要加入以下代码。
首先导入vue
import Vue from 'vue'
然后在文件结尾加上
export default router
注意最后要修改组件路径
可以写绝对路径,@标识符指代src目录,从src目录出发找组件,例如'@/views/Find.vue'。
声明式导航
声明式导航就是router-link,使用router-link替代a标签实现高亮
导航链接
需求:实现导航高亮效果
vue-router提供了一个全局组件router-link(取代a标签)
1)能跳转,配置to属性指定路径(必须)。本质还是a标签,to无需#
2)能高亮,默认就会提供高亮类名,可以直接设置高亮样式
<div class="footer_wrap">
<router-link to="/find">发现音乐</router-link>
<router-link to="/mymusic">我的音乐</router-link>
<router-link to="/friend">朋友</router-link>
</div>
在css文件中,加入如下代码,可以实现选中高亮
a.router-link-active {
background-color: purple;
}
高亮使用router-link-active
跳转传参
目标:在跳转路由时,进行传值
1.查询参数传参(比较适合传多个参数)
1)语法:to="/path?参数名=值&参数名2=值"
2)对应页面组件接收传递过来的值$route.query.参数名
在created中,使用this.$route.query.参数名获取
2.动态路由传参(优雅简洁,传单个参数比较方便)
1)配置动态路由
const router = new VueRouter({
routes: [
...,
{ path: '/search/:参数名', component: Search }
]
})
2)配置导航链接
to="/path/参数值"
3)对应页面组件接收传递过来的值
$route.params.参数名
在created中,使用this.$route.params.参数名获取
路由重定向
问题:网页打开,url默认是/路径,未匹配到组件时,会出现空白
说明:重定向->匹配path后,强制跳转path路径
语法:{path:匹配路径,redirect:重定向到的路径}
const router = new VueRouter({
routes: [
{ path: '/',redirect:'/home'},
{ path: '/mymusic', component: MyMusic },
{ path: '/friend', component: Friend }
]
})
路由404
作用:当路径找不到匹配时,给个提示页面
位置:配在路由最后
语法:path:"*"(任意路径)-前面不匹配就命中最后一个
先在views文件夹下创建NotFind组件
import NotFind from '@/views/NotFind'
const router = new VueRouter({
routes: [
{ path: '/',redirect:'/home'},
{ path: '/mymusic', component: MyMusic },
{ path: '/friend', component: Friend },
{ path: '*', component: NotFind }
]
})
路由模式设置
问题:路由的路径看起来不自然,有#,能否切成真正路径形式?
hash路由(默认)例如:http://localhost:8080/#/home
history路由(常用)例如:http://localhost:8080/home(以后上线需要服务器端支持)
const router=new VueRouter({
routes,
mode:"history"
})
采用了history模式,地址栏就没有#,需要后台配置访问规则
编程式导航
编程式导航:用JS代码来进行跳转
基本跳转
两种语法:
1)path路径跳转(简易方便)
this.$router.push('路由路径')
this.$router.push({
path:'路由路径'
})
2)name命名路由跳转(适合path路径长的场景)
this.$router.push({
name:'路由名'
})
{name:'路由名',path:'/path/xxx',component:xxx}//在index.js文件VueRouter中添加
路由传参
两种传参方式:查询参数+动态路由传参
两种跳转方式,对于两种传参方式都支持:
1)path路径跳转传参
query查询参数:
this.$router.push('/路径?参数名1=参数值1&参数名2=参数值2')
或
this.$router.push({
path:'/路径',
query:{
参数名1:'参数值1',
参数名2:'参数值2'
}
})
$route.query.参数名//接收参数
动态路由参数:
路由:
const router = new VueRouter({
mode:'history',
routes: [
...,
{ name:'search', path: '/search/:参数名?', component: Search }
]
})
this.$router.push('/路径/参数值')
或
this.$router.push({
path:'/路径/参数值'
})
$route.params.参数名//接收参数
2)name命名路由跳转传参
query查询参数:
this.$router.push({
name:'路由名字',
query:{
参数名1:'参数值1',
参数名2:'参数值2'
}
})
$route.query.参数名//接收参数
动态路由参数:
路由:
const router = new VueRouter({
mode:'history',
routes: [
...,
{ name:'search', path: '/search/:参数名?', component: Search }
]
})
this.$router.push({
name:'路由名字',
params:{
参数名:'参数值'
}
})
$route.params.参数名//接收参数
一级路由
但凡是单个页面,独立展示的,都是一级路由
router中导入时,如果是index.vue直接写到文件夹名即可,会自动导入到index.vue
import Login from '@/views/login'
二级路由
通过children配置项,可以配置嵌套子路由
1.在children配置项中,配规则
const router = new VueRouter({
routes: [
{
path: '/',
component:Layout,
//通过children配置项,可以配置嵌套子路由
children:[
{
path: '/article',
component:Article,
}
]
}
]
})
2.准备二级路由出口,在父页面中添加
<router-view></router-view>
页面空白的话,要用redirect重定向
页面返回
@click="$router.back()"
@click="$router.go(-1)"
全局前置导航守卫
所有的路由一旦被匹配到,都会先经过全局前置守卫;只有全局前置守卫放行,才会真正解析渲染组件,才能看到页面内容
官方资料:导航守卫 | Vue Router
fullPath
在this.$route中,path只是路径部分,fullPath是完整的地址。
this.$route.fullpath//获取完整路径(包括参数)
this.$route.path//获取路径(不包括参数)
replace
this.$router.replace可以用来替换当前的路由,它不会向history添加新记录,而是替换掉当前的history记录
this.$route.replace(路径)