vue路由的使用

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: "路由名"
})

• 具体操作：

1. main.js - 路由数组里, 给路由起名字
2. this.$router.push()配置path/name
3. 要和路由规则数组里对应

7. 编程式导航 - 跳转传参

目标: JS跳转路由, 传参

1. path+query传, $route.query接
2. name+params传, $route.params接 格外注意: 使用path会自动忽略params

8.vue路由 - 嵌套和守卫

router-link，router-view，写在父级组件中

路由规则，写到父级路由规则的children中

二级路由注意什么?

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

9 全局前置守卫

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

语法： router.beforeEach((to, from, next) => {})

什么是路由守卫?

1. 路由在真正跳转前, 会执行一次beforeEach函数, next调用则跳转, 也可以强制修改要跳转的路由