单页面应用程序,之所以开发效率高,性能好,用户体验好
最大的原因就是:页面按需更新
比如当点击【发现音乐】和【关注】时,只是更新下面部分内容,对于头部是不更新的
访问路径 和 组件的对应关系如何确定呢? 路由
生活中的路由:设备和ip的映射关系
Vue中的路由:路径和组件的映射关系
认识插件 VueRouter,掌握 VueRouter 的基本使用步骤
修改地址栏路径时,切换显示匹配的组件
Vue 官方的一个路由插件,是一个第三方包
Vue Router
固定5个固定的步骤(不用死背,熟能生巧)
yarn add [email protected]
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter()
new Vue({
render: h => h(App),
router:router
}).$mount('#app')
当我们配置完以上5步之后 就可以看到浏览器地址栏中的路由 变成了 /#/的形式。表示项目的路由已经被Vue-Router管理了
main.js
// 路由的使用步骤 5 + 2
// 5个基础步骤
// 1. 下载 v3.6.5
// yarn add [email protected]
// 2. 引入
// 3. 安装注册 Vue.use(Vue插件)
// 4. 创建路由对象
// 5. 注入到new Vue中,建立关联
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化
const router = new VueRouter()
new Vue({
render: h => h(App),
router
}).$mount('#app')
注意: .vue文件 本质无区别
.vue文件分为2类,都是 .vue文件(本质无区别)
分类开来的目的就是为了 更易维护
问题:所有的路由配置都在main.js中合适吗?
目标:将路由模块抽离出来。 好处:拆分模块,利于维护
路径简写:
脚手架环境下 @指代src目录,可以用于快速引入组件
如果使用a标签进行跳转的话,需要给当前跳转的导航加样式,同时要移除上一个a标签的样式,太麻烦!!!
vue-router 提供了一个全局组件 router-link (取代 a 标签)
语法: 发现音乐
使用router-link跳转后,我们发现。当前点击的链接默认加了两个class的值 router-link-exact-active
和router-link-active
我们可以给任意一个class属性添加高亮样式即可实现功能
当我们使用跳转时,自动给当前导航加了两个类名
模糊匹配(用的多)
to="/my" 可以匹配 /my /my/a /my/b ....
只要是以/my开头的路径 都可以和 to="/my"匹配到
精确匹配
to="/my" 仅可以匹配 /my
router-link的两个高亮类名 太长了,我们希望能定制怎么办
我们可以在创建路由对象时,额外配置两个配置项即可。 linkActiveClass
和linkExactActiveClass
const router = new VueRouter({
routes: [...],
linkActiveClass: "类名1",
linkExactActiveClass: "类名2"
})
// 创建了一个路由对象
const router = new VueRouter({
routes: [
...
],
linkActiveClass: 'active', // 配置模糊匹配的类名
linkExactActiveClass: 'exact-active' // 配置精确匹配的类名
})
如何自定义router-link的两个高亮类名
在跳转路由时,进行传参
比如:现在我们在搜索页点击了热门搜索链接,跳转到详情页,需要把点击的内容带到详情页,改怎么办呢?
我们可以通过两种方式,在跳转的时候把所需要的参数传到其他页面中
App.vue
首页
搜索页
Home.vue
热门搜索:
黑马程序员
前端培训
如何成为前端大牛
Search.vue
搜索关键字: 黑马程序员
搜索结果:
- .............
- .............
- .............
- .............
router/index.js
import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化
// 创建了一个路由对象
const router = new VueRouter({
routes: [
{ path: '/home', component: Home },
{ path: '/search', component: Search }
]
})
export default router
main.js
...
import router from './router/index'
...
new Vue({
render: h => h(App),
router
}).$mount('#app')
动态路由后面的参数可以随便起名,但要有语义
const router = new VueRouter({
routes: [
...,
{
path: '/search/:words',
component: Search
}
]
})
params后面的参数名要和动态路由配置的参数保持一致
注意:动态路由也可以传多个参数,但一般只传一个
声明式导航跳转时, 有几种方式传值给路由页面?
配了路由 path:"/search/:words" 为什么按下面步骤操作,会未匹配到组件,显示空白?
/search/:words 表示,必须要传参数。如果不传参数,也希望匹配,可以加个可选符"?"
const router = new VueRouter({
routes: [
...
{ path: '/search/:words?', component: Search }
]
})
网页打开时, url 默认是 / 路径,未匹配到组件时,会出现空白
重定向 → 匹配 / 后, 强制跳转 /home 路径
{ path: 匹配路径, redirect: 重定向到的路径 },
比如:
{ path:'/' ,redirect:'/home' }
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/home'},
...
]
})
当路径找不到匹配时,给个提示页面
404的路由,虽然配置在任何一个位置都可以,但一般都配置在其他路由规则的最后面
path: "*" (任意路径) – 前面不匹配就命中最后这个
import NotFind from '@/views/NotFind'
const router = new VueRouter({
routes: [
...
{ path: '*', component: NotFind } //最后一个
]
})
NotFound.vue
404 Not Found
router/index.js
...
import NotFound from '@/views/NotFound'
...
// 创建了一个路由对象
const router = new VueRouter({
routes: [
...
{ path: '*', component: NotFound }
]
})
export default router
路由的路径看起来不自然, 有#,能否切成真正路径形式?
const router = new VueRouter({
mode:'histroy', //默认是hash
routes:[]
})
点击按钮跳转如何实现?
编程式导航:用JS代码来进行跳转
两种语法:
特点:简易方便
//简单写法
this.$router.push('路由路径')
//完整写法
this.$router.push({
path: '路由路径'
})
特点:适合 path 路径长的场景
语法:
{ name: '路由名', path: '/path/xxx', component: XXX },
this.$router.push({
name: '路由名'
})
编程式导航有几种跳转方式?
点击搜索按钮,跳转需要把文本框中输入的内容传到下一个页面如何实现?
1.查询参数
2.动态路由传参
两种跳转方式,对于两种传参方式都支持:
① path 路径跳转传参
② name 命名路由跳转传参
//简单写法
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
//完整写法
this.$router.push({
path: '/路径',
query: {
参数名1: '参数值1',
参数名2: '参数值2'
}
})
接受参数的方式依然是:$route.query.参数名
//简单写法
this.$router.push('/路径/参数值')
//完整写法
this.$router.push({
path: '/路径/参数值'
})
接受参数的方式依然是:$route.params.参数值
注意:path不能配合params使用
this.$router.push({
name: '路由名字',
query: {
参数名1: '参数值1',
参数名2: '参数值2'
}
})
this.$router.push({
name: '路由名字',
params: {
参数名: '参数值',
}
})
编程式导航,如何跳转传参?
1.path路径跳转
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
this.$router.push({
path: '/路径',
query: {
参数名1: '参数值1',
参数名2: '参数值2'
}
})
this.$router.push('/路径/参数值')
this.$router.push({
path: '/路径/参数值'
})
2.name命名路由跳转
this.$router.push({
name: '路由名字',
query: {
参数名1: '参数值1',
参数名2: '参数值2'
}
})
this.$router.push({
name: '路由名字',
params: {
参数名: '参数值',
}
})