vue路由

目录

一、声明式导航 

1.1 声明式导航 - 跳转传参 

二、重定向和模式 

2.1 重定向 

2.2 404页面 

2.3  模式设置 

 三、编程式导航

3.1 跳转传参 

四、嵌套和守卫 

4.1 路由嵌套 

4.2 声明导航 - 类名区别 

4.3 全局前置守卫 

---

#博学谷IT学习技术支持#

vue2 需要安装3版本的路由

yarn add vue-router

首先在src 的目录下创建router 和 views 这两个文件

 

在router文件创建index.js文件：

import Vue from 'vue'
// 导入组件
import home from '@/views/HomePart'
import find from '@/views/FindPart'
import my from '@/views/MyPart'
// 导入路由
import VueRouter from 'vue-router'
// 在vue中，使用使用vue的插件，都需要调用Vue.use()
Vue.use(VueRouter)
// 创建路由规则数组
const routes = [
    {
        part: "/home",
        component: home
    },
    {
        part: "/find",
        component: find
    },
    { 
        part: "/my",
        component: my
    }
]
// 创建路由对象 - 传入规则
const router = new VueRouter({
    routes
})
// 导出路由对象
export default router

 views 文件下三个是路由需要跳转的组件

在main.js下：

这里所有的基本工作都已经准备完毕

一、声明式导航 

 

<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/home">主页</router-link>
      <router-link to="/my">我的</router-link>
      <router-link to="/find">发现</router-link>
    </div>
    <div class="top">
      <!-- 一级路由挂载点 -->
      <router-view></router-view>
    </div>
  </div>
</template>

总结: 链接导航, 用router-link配合to, 实现点击切换路由 

1.1 声明式导航 - 跳转传参 

 

 

 

二、重定向和模式 

2.1 重定向 

 

 

2.2 404页面 

 

 

2.3  模式设置 

目标: 修改路由在地址栏的模式 

const router = new VueRouter({
  routes,
  mode: "history" // 打包上线后需要后台支持, 模式是hash
})

 三、编程式导航

 

 

3.1 跳转传参 

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

// 对应路由接收   $route.params.参数名   取值
// 对应路由接收   $route.query.参数名    取值

==格外注意: 使用path会自动忽略params==

 

四、嵌套和守卫 

4.1 路由嵌套 

配置路由规则-二级路由展示

 

总结: 嵌套路由, 找准在哪个页面里写router-view和对应规则里写children 

4.2 声明导航 - 类名区别 

 

 

4.3 全局前置守卫 

目标: 路由跳转之前, 先执行一次前置守卫函数, 判断是否可以正常跳转

 

 总结: next()放行, next(false)留在原地不跳转路由, next(path路径)强制换成对应path路径跳转