1,路由 vue-router使用步骤
目标: 学会vue官方提供的vue-router路由系统功能模块使用
1.下载vue-router
yarn add vue-router
创建src/router/index.js,写如下代码
2.导入路由
import VueRouter from 'vue-router'
3.注册路由插件
Vue.use(VueRouter)
4.创建路由规则数组(main.js)
import Find from '@/views/Find' // @是src的绝对地址
import My from '@/views/My'
import Part from '@/views/Part'
const routes = [
{
path: "/find",
component: Find
},
{
path: "/my",
component: My
},
{
path: "/part",
component: Part
}
]
5.创建路由对象 - 传入规则
const router = new VueRouter({
routes
})
export defaut router // 导出路由对象
6.关联到vue实例 (main.js)
import router from '@/router'
new Vue({
router
})
7.components换成router-view
<router-view></router-view>
2.声明式导航
<router-link to="/find">发现音乐</router-link>
3.声明式导航 - 跳转传参
1. 声明式导航跳转时, 如何传值给路由页面?
1. to="/path?参数名=值"
2. to=“/path/值” (需在路由规则里配置/path/:参数名)
2. 如何接收路由传值?
1. $route.query.参数名
2. $route.params.参数名
4.vue路由 - 重定向和模式
//main.js中增加
{
path: "/", // 默认hash值路径
redirect: "/find" // 重定向到/find
// 浏览器url中#后的路径被改变成/find-重新匹配数组规则
}
5.路由 - 404页面
创建views/NotFound.vue页面
在main.js - 修改路由配置
{
path: "*",
component: NotFound
}
6. vue路由 - 编程式导航
目标: 用JS代码来进行跳转
语法: 用path/name任选一个
this.$router.push({
path: "路由路径",
name: "路由名"
})
- 具体操作:
- main.js - 路由数组里, 给路由起名字
- this.$router.push()配置path/name
- 要和路由规则数组里对应
7. 编程式导航 - 跳转传参
目标: JS跳转路由, 传参
- path+query传, $route.query接
- name+params传, $route.params接 格外注意: 使用path会自动忽略params
8.vue路由 - 嵌套和守卫
router-link,router-view,写在父级组件中
路由规则,写到父级路由规则的children中
二级路由注意什么?
- 二级路由path一般不写根路径/
- 跳转时路径要从/开始写全
9 全局前置守卫
目标: 路由跳转之前, 先执行一次前置守卫函数, 判断是否可以正常跳转
语法: router.beforeEach((to, from, next) => {})
什么是路由守卫?
- 路由在真正跳转前, 会执行一次beforeEach函数, next调用则跳转, 也可以强制修改要跳转的路由