Vue Router(5)

Vue-Router

1. 什么是前端路由

  • 网址:router.vuejs.org
  • 后端渲染\后端路由
  • 前后端分离
  • SPA\前端路由

2. 路由的基本配置

  1. 配置路由信息(index.js)
  • 安装 vue-router
npm install vue-router
  • vue.use => 创建对象 => 挂载到实例上
import VueRouter from "vue-router"
import Vue from "vue"
// 1. 通过vue.use(插件),安装插件
Vue.use(VueRouter)
// 2. 创建对象
const router = new VueRouter({
    // 配置路由和组件之间的关系(默认为 hash 值,可通过mode 改成 history 模式)
    routes,
})
// 3. 挂载到实例上(配置每个映射关系)
// 引入两个组件(动态导入) <== 路由懒加载
const Home = () => import("../components/Home")
const User = () => import("../components/User")
const routes = [
    {
        // 默认路径
        path: "",
        redirect: "/home", // redirect 重定向
    },
    {
        path: "/home",
        component: Home,
    },
    {
        path: "/user/:id",
        component: User,
    },
]
  • 配置映射关系
    1. 创建组件
    2. 配置映射关系
    3. 使用 router-link1/router-view2
<template>
    <div id="app">
        <router-link to="/home" tag="button">
            首页
        </router-link>
        // replace 改变跳转方式,不能返回上一页
        <router-link v-bind:to="'/user/' + useId" replace>
            用户
        </router-link>
        <router-view></router-view>
    </div>
</template>

3. 细节处理

  • 默认路由:redirect
  • mode: “history”

    修改为 history 模式(网址中不存在 /# )

  • router-link => tag/replace/active-class

    tag: 定义渲染后的标签
    replace: 改变跳转方式,不能访问上一页
    active-class: 改变活跃标签的类名

$router 和 $route 的比较
注意:所有的组件都继承着 Vue 的原型

  • $router
    • router 是路由栈
  • $route
    • route 是当前活跃节点

4. 动态路由

  • /user/:id
  • this.$route.params.id

5. 参数的传递

  • params(数据少的情况)

    1. 配置路由格式: /router/:id
    2. 传递的方式: 在 path 后面跟上对应的值
    3. 传递后形成的路径: /router/123,/router/abc
// 配置路由
{ path: '/user/:id', component: User },
// 传递参数
<router-link v-bind:to="'/user/' + useId" replace>
    用户
</router-link>
// 组件中传入参数
<h2>{{$route.params.id}}</h2>
  • query -> URL(大量数据)3

    1. URL:配置的方法: /router
    2. 传递的方式: 对象中使用 query 的 key 作为传递方式
    3. 传递后形成的路径: /router?id=123, /router?id=abc
// 传递参数
<router-link v-bind:to="{path: '/profile',query: {name:'why',age='18'}}">
    档案
</router-link>
// 组件中传入参数
<h2>{{$route.query.name}}</h2>

6. 路由嵌套

  • children

7. 导航守卫

  • 全局导航守卫
// 前置守卫(guard)
router.beforeEach((to, from, next) => {
    // 默认重定向
    document.title = to.matched[0].meta.title
    next()
})
// 后置钩子(hook)
router.afterEach((to, from) => {
    console.log("hook")
})
  • 路由独享守卫
  • 组件类守卫

8. keep-alive

  1. 基本使用
beforeRouteLeave(to,from,next){
    this.path=this.$route.path
    next()
}
  1. 两个属性
    1. include ==> 字符串或正则表达式,只有匹配的组件会被缓存
    2. exclude ==> 字符串或正则表达式,任何匹配的组件都不会被缓存

  1. router-link 标签最终默认被渲染成 a 标签(tag 可以修改成其他标签) ↩︎

  2. router-view 表示渲染的内容出现的位置 ↩︎

  3. URL:
    协议://主机端口/路径?查询
    scheme://host:port/path?query#fragment

    ↩︎
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页