1.路由
Vue中的路由:路径和组件的映射关系
2.路由的优缺点
优点:
-
整体不刷新页面,用户体验更好
-
数据传递容易, 开发效率高
缺点:
-
开发成本高(需要学习专门知识)
-
首次加载会比较慢一点。不利于seo
3.vue-router使用
-
安装
yarn add vue-router
-
导入路由
import VueRouter from 'vue-router'
-
使用路由插件
// 在vue中,使用使用vue的插件,都需要调用Vue.use() Vue.use(VueRouter)
-
创建路由规则数组
const routes = [ { path: "/find", component: Find }, { path: "/my", component: My }, { path: "/part", component: Part } ]
-
创建路由对象 - 传入规则
-
const router = new VueRouter({ routes })
-
关联到vue实例
new Vue({ router })
-
components换成router-view
<router-view></router-view>
4.vue路由 - 声明式导航
-
<router-view to="/path"></router-view>
5.声明式导航 - 跳转传参
目标: 在跳转路由时, 可以给路由对应的组件内传值
在router-link上的to属性传值, 语法格式如下
-
/path?参数名=值
-
/path/值 – 需要路由对象提前配置 path: “/path/参数名”
对应页面组件接收传递过来的值
-
$route.query.参数名
-
$route.params.参数名
tips:route路由信息对象,router路由实例对象
6.vue路由 - 重定向和模式
6.1重定向
var toutes = [ { path:'/' redirect:'/path' } { path:"*" //写在最后为404时显示的页面 component:"/404page" } ]
6.2模式
const router = new VueRouter({ mode:"hash" // history })
7.vue路由 - 编程式导航以及传参方式
语法:
this.$router.push({ path: "路由路径", // 都去 router/index.js定义 name: "路由名" query: { "参数名": 值 } params: { "参数名": 值 } }) // 对应路由接收 $route.params.参数名 取值 // 对应路由接收 $route.query.参数名 取值
==格外注意: 使用path会自动忽略params==
8.路由守卫
// 目标: 路由守卫 // 场景: 当你要对路由权限判断时 // 语法: router.beforeEach((to, from, next)=>{//路由跳转"之前"先执行这里, 决定是否跳转}) // 参数1: 要跳转到的路由 (路由对象信息) 目标 // 参数2: 从哪里跳转的路由 (路由对象信息) 来源 // 参数3: 函数体 - next()才会让路由正常的跳转切换, next(false)在原地停留, next("强制修改到另一个路由路径上") // 注意: 如果不调用next, 页面留在原地 // 例子: 判断用户是否登录, 是否决定去"我的音乐"/my const isLogin = true; // 登录状态(未登录) router.beforeEach((to, from, next) => { if (to.path === "/my" && isLogin === false) { alert("请登录") next(false) // 阻止路由跳转 } else { next() // 正常放行 } })
总结: next()放行, next(false)留在原地不跳转路由, next(path路径)强制换成对应path路径跳转