Vueday07

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路径跳转