一次分享三个 vue必用的知识-路由系统 -嵌套守卫- 重定向路由系统嵌套守卫重定向一.Vue路由简介和基础使用

路由系统嵌套守卫重定向

一.Vue路由简介和基础使用

路由是什么呢?

路由是一种映射关系

Vue中的路由是什么?

路径和组件的映射关系

为什么使用路由

单页面应用(SPA): 所有功能在一个html页面上实现

前端路由作用: 实现业务场景切换

⚫ 优点：

整体不刷新页面，用户体验更好
数据传递容易, 开发效率高

⚫ 缺点：

开发成本高(需要学习专门知识)
首次加载会比较慢一点。不利于seo

vue-router

vue-router本质是一个第三方包

它和 Vue.js 深度集成
可以定义 - 视图表(映射规则)
模块化的
提供2个内置全局组件
声明式导航自动激活的 CSS class 的链接

组件分类

目标： .vue文件分2类, 一个是页面组件, 一个是复用组件

页面组件用在哪里?

配合路由, 切换页面

复用组件用在哪里?

页面组件, 重复渲染结构一样的标签

⚫ 步骤

下载vue-router模块到当前工程
在main.js中引入VueRouter函数
添加到Vue.use()身上 – 注册全局RouterLink和RouterView组件
创建路由规则数组 – 路径和组件名对应关系
用规则生成路由对象
把路由对象注入到new Vue实例中
用router-view作为挂载点, 切换不同的路由页面

注意: 一切都要以url上hash值为准

二 . 声明式导航

目标：可用组件router-link来替代a标签

1.vue-router提供了一个全局组件 router-link
2.router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)
3.router-link提供了声明式导航高亮的功能(自带类名)

<div class="footer_wrap">
      <!-- <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/part">朋友</a> -->
    
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/part">朋友</router-link>
    </div>

router-link好处?

自带激活时的类名, 可以做高亮

声明式导航 - 跳转传参

目标：在跳转路由时, 可以给路由对应的组件内传值

在router-link上的to属性传值, 语法格式如下
/path?参数名=值
/path/值 – 需要路由对象提前配置 path: “/path/参数名”
对应页面组件接收传递过来的值
$route.query.参数名
$route.params.参数名

<div class="footer_wrap">
    <!-- <a href="#/find">发现音乐</a>
    <a href="#/my">我的音乐</a>
    <a href="#/part">朋友</a> -->
    <router-link to="/find/?username">发现音乐</router-link>   接收 <!-- {{ $route.query.username }} -->
    <router-link to="/my">我的音乐</router-link>  
    <!-- 查询字符串 -->
    <router-link to="/part?name=哈哈哈">朋友</router-link>  接收 <!-- {{ $route.query.username }} -->
  </div>

三 . 重定向和模式

路由 - 重定向

目标：匹配path后, 强制跳转path路径

⚫ 网页打开url默认hash值是/路径

⚫ redirect是设置要重定向到哪个路由路径

const  routes= [
  {
  // path 指的是 在浏览器地址栏上面访问的路径
  // component 组件 访问的路径
  path: '/my',
  component:My,
},
{
  path: '/find',
  component:Find,
},
{
  path: '/part',
  // component: 组件对象
  component:Part
}
]

路由 - 404

找不到路径给个提示页面

路由最后, path匹配*(任意路径) – 前面不匹配就命中最后这个

// 404 插件
import NotFound from './views/NotFound.vue'

const  routes= [
  {
  // path 指的是 在浏览器地址栏上面访问的路径
  // component 组件 访问的路径
  path: '/my',
  component:My,
},
{
  path: '/find',
  component:Find,
},
{
  path: '/part',
  // component: 组件对象
  component:Part
},
    
   // 添加在最后 
{
  path:"*",
  component:NotFound
}
]

路由 - 模式设置

修改路由在地址栏的模式

hash路由例如:http://xxx:0808/#mone

history路由例如: http://xxx:0808/#mone (以后上线需要服务器端支持, 否则找的是文件夹)

// 4.根据路由规则数组 创建 路由对象
const router = new VueRouter({
   // routes : routes  key  和 value
   routes,

  // 去掉路径的 # 需要后端配置一般不会使用  (面试)
  mode:'history'
})

四 . 基础使用

编程式导航 - 基础使用

目标：用JS代码来进行跳转

语法: path或者name任选一个

this.$router.push({
    path:"路由路径"，  // 都去 router / index.js 定义
    name:"路由名"
})

methods:{
    add(){
      // 一 push 跳转
      // 1.path 跳转
      this.$router.push({
        path:'/my'
      })

      // 2.根据name 跳转 main.js里需要在要跳转到的页面添加 name 属性
      // this.$router.push({
      //   name:'tiao'
      // })

       console.log(this.$route)
       console.log(this.$router)
      // 二 replace 跳转
      //  this.$router.replace({
      //    path:'/my'
      //  })
      //   this.$router.replace({
      //    name:'tiao'
      //  })

      // 二者作用一样
      // push  跳转有历史记录
      // replace  无跳转记录

      
      // 声明式导航  a  标签实现跳转
      // 编程式导航 一般都是 按钮形式 需要配合 js 代码 实现跳转

      // 使用 path  实现编程式,只使用 path
      this.$router.push({
        path : '/my',
        query :{
          age :88
        }
      })

    } 
  }

编程式导航 -跳转传参

：JS跳转路由, 传参

语法: query或者params任选一个

4.1 编程式导航 -跳转传参

query传, $route.query接
params传, $route.params接

目标：JS跳转路由, 传参 注意: 使用path会忽略params

this.$rouuter.push({
    path:"路由路径"
    name:"路由名"
    query:{
    "参数名"：值
}
  ----------
   params:{
      "参数名"：值
    }
})

   //注意: 使用path会忽略params
-----------------
    <p> {{ $route.query.name }} </p>
  <p> {{$route.params.username}} </p>

五 . 嵌套和守卫

路由 - 路由嵌套

在现有的一级路由下, 再嵌套二级路由

二级路由如何配置?

创建需要的二级页面组件
路由规则里children中配置二级路由规则对象
一级页面中设置router-view显示二级路由页面

二级路由注意什么?

二级路由path一般不写根路径/
跳转时路径要从/开始写全

自动添加的2个类名的区别?

router-link-exact-active – url的hash值和href完全匹配
router-link-active – url的hash值包含href路径值匹配

const  routes= [
  {
  // path 指的是 在浏览器地址栏上面访问的路径
  // component 组件 访问的路径
  path: '/my',
  component:My,
},
{
  path: '/find',
  component:Find,
    
 // 添加给要二级嵌套的组件上
     children:[
    {
      path: 'recommend',
      component:Recommend,
    },
    {
      path: 'ranking',
      component:Ranking
    },
    {
      path: 'songlist',
      component:SongList
    },
  ]
    --------------
         
},
{
  path: '/part',
  // component: 组件对象
  component:Part
}
]

全局前置守卫

路由跳转之前, 会触发一个函数

例如: 登陆状态去<我的音乐>页面, 未登录弹窗提示

语法: router.beforeEach((to, from, next) =>｛｝)

一定调next(), 才会跳转下一页

// 路由守卫 
// 模拟 :如果用户没有登录 他想访问 我的音乐 阻止
//  to 要去的那个路由页面
// from 来自那个路由页面
//  next() 是一个函数, 没有调用 next() 函数 表示 不发生跳转
//  next('./index') 表示可以让其跳转到对应的路由
//  next(false) 阻止跳转 

const isLogin = false  // 未登录
router.beforeEach((to,from,next)=>{
  if(to.path==='/my' && isLogin === false){
    alert('没有登录')
    next(false)   // 阻止路由跳转
  }else{
    // 放行
    next()
  }
})

一次分享三个 vue必用的知识-路由系统 -嵌套守卫- 重定向

路由系统 嵌套守卫 重定向