Vue学习笔记 —— vue-router

幸运丫
347 阅读5分钟

笔记参考 b 站视频 尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

  • 路由就是一组 key-value 的对应关系
  • 多个路由，需要经过路由器的管理

路由的基本使用

  1. 安装 vue-router，命令：npm i vue-router
  2. 应用插件：Vue.use(VueRouter)
  3. 编写 router 配置项
// 引入 VueRouter
import VueRouter from 'vue-router'
// 引入组件
import About from '../components/About'
import Home from '../components/Home'

// 创建 router 实例对象，去管理一组一组的路由规则
const router = new VueRouter({
    routes: [
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home
        }
    ]
})

// 暴露 router
export default router
  1. 实现切换（active-class 可配置高亮样式）
<router-link active-class="active" to="/about">About</router-link>
  1. 指定展示位置
<router-view></router-view>

几个注意点

  1. 路由组件通常存在放 pages 文件夹，一般组件通常存放在 components 文件夹
  2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载
  3. 每个组件都有自己的 $route 属性，里面存储着自己的路由信息
  4. 整个应用只有一个 router，可以通过组件的 $router 属性获取到

多级路由（嵌套路由）

  1. 配置路由规则，使用 children 配置项
routes: [
    {
        path: '/about',
        component: About
    },
    {
        path: '/home',
        component: Home,
        children: [ // 通过 children 配置子级路由
            {
                path: 'news', // 此处一定不要写：/news
                component: News
            },
            {
                path: 'message', // 此处一定不要写：/news
                component: Message
            }
        ]
    }
]
  1. 跳转（要写完整路径）
<router-link to="/home/news">News</router-link>

路由的 query 参数

  1. 传递参数
<!-- 跳转并携带 query 参数，to 的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>

<!-- 跳转并携带 query 参数，to 的对象写法 -->
<router-link
    :to="{
        path:'/home/message/detail',
        query:{
            id:666,
            title:'你好'
        }
    }"
>跳转</router-link>
  1. 接收参数
$route.query.id
$route.query.title

命名路由

  1. 作用：可以简化路由的跳转
  2. 如何使用
    1. 给路由命名
    {
    path: '/demo',
    component: Demo,
    children: [
        {
            path: 'test',
            component: Test,
            children: [
                {
                    name: 'hello', // 给路由命名
                    path: 'welcome',
                    component: Hello
                }
            ]
        }
    ]
}
    1. 简化跳转
    <!-- 简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>

<!-- 简化后，直接通过名字跳转 -->
<router-link :to="{name: 'hello'}">跳转</router-link>

<!-- 简化写法配合传递参数 -->
<router-link
    :to="{
        name: 'hello',
        query: {
            id: 666,
            title: '你好'
        }
    }"
>跳转</router-link>

路由的 params 参数

  1. 配置路由，声明接收 params 参数
{
    path: '/home',
    component: Home,
    children: [
        {
            path: 'news',
            component: News
         },
         {
            component: Message,
            children: [
                {
                    name: 'xiangqing', // 给路由命名
                    path: 'detail/:id/:title', // 使用占位符声明接收 params 参数
                    component: Detail
                }
            ]
        }
    ]
}
  1. 传递参数
<!-- 跳转并携带 params 参数，to 的字符串写法 -->
<router-link to="/home/message/detail/666/你好">跳转</router-link>

<!-- 跳转并携带 params 参数，to 的对象写法 -->
<router-link
    :to="{
        name: 'xiangqing',
        query: {
            id: 666,
            title: '你好'
        }
    }"
>跳转</router-link>

特别注意：路由携带 params 参数时，若使用 to 的对象写法，则不能使用 path 配置项，必须使用 name 配置！

  1. 接收参数
$route.params.id
$route.params.title

路由的 props 配置

  • 作用：让路由组件更方便的收到参数
{
    name: 'xiangqing',
    path: 'detail/:id',
    component: Detail,

    // 第一种写法：props 值为对象，该对象中所有的 key-value 的组合最终都会通过 props 传给 Detail 组件
    // props: {a: 900}

    // 第二种写法：props 值为布尔值，布尔值为 true，则把路由收到的所有 params 参数通过 props 传给 Detail 组件
    // props: true

    // 第三种写法：props 值为函数，该函数返回的对象中每一组 key-value 都会通过 props 传给 Detail 组件
    props(route){
        return {
            id: route.query.id,
            title: route.query.title
        }
    }
}

<router-link> 的 to 属性

  • 下面两种写法都可以实现路由跳转，都链接到同一个路由。且路径不区分大小写

image.png

image.png

image.png

<router-link> 的 replace 属性

  1. 作用：控制路由跳转时操作浏览器历史记录的模式
  2. 浏览器的历史记录有两种写入方式：分别为 push 和 replace，push 是追加历史记录，replace 是替换当前记录。路由跳转时候默认为 push。
  3. 如何开启 replace 模式：<router-link replace ...>News</router-link>

编程式路由导航

  1. 作用：不借助 <router-link> 实现路由跳转，让路由跳转更加灵活
  2. 具体编码
// $router 的两个 API
this.$router.push({
    name: 'xiangqing',
    params: {
        id: xxx,
        title: xxx
    }
})

this.$router.replace({
    name: 'xiangqing',
    params: {
        id: xxx,
        title: xxx
    }
})
this.$router.forward() // 前进
this.$router.back() // 后退
this.$router.go() // 可前进，可后退

缓存路由组件

  1. 作用：让不展示的路由组件保持挂载，不被销毁
  2. 具体编码：
<!-- 这里的 News 是组件名 -->
<keep-alive include="News">
    <router-view></router-view>
</keep-alive>

两个新的生命周期钩子

  1. 作用：路由组件所独有的两个狗子，用于捕获路由组件的激活状态
  2. 具体名字：
    1. activated：路由组件被激活时触发
    2. deactivated：路由组件失活时触发

路由守卫

  1. 作用：对路由进行权限控制
  2. 分类：全局路由、独享路由、组件内路由
  3. 全局守卫：
// 全局前置守卫：初始化时执行，每次路由切换前执行
router.beforeEach((to, from, next) => {
    console.log('before', to, from)
    if(to.meta.isAuth){ // 判断当前路由是否需要进行权限控制
        if(localStorage.getItem('school') === 'atguigu'){
            next() // 放行
        } else {
            alert('暂无权限查看')
        }
    } else {
        next() // 放行
    }
})

// 全局后置守卫：初始化时执行，每次路由切换后执行
router.afterEach((to, from) => {
    console.log('afterEach', to, from)
    if(to.meta.title){
        document.title = to.meta.title // 修改网页的 title
    } else {
        document.title = 'vue_test'
    }
})
  1. 独享守卫
beforeEnter(to, from, next) {
    console.log('beforeEnter', to, from)
    if(to.meta.isAuth) { // 判断当前路由是否需要进行权限控制
        if(localStorage.getItem('school') === 'atguigu'){
            next() // 放行
        } else {
            alert('暂无权限查看')
        }
    } else {
        next() // 放行
    }
}
  1. 组件内守卫
// 进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter(to, from, next) {
},
// 离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave(to, from, next) {
}

路由器的两种工作模式

  1. 对于一个 url 来说，什么是 hash 值？—— # 及其后面的内容就是 hash 值
  2. hash 值不会包含在 HTTP 请求中，即：hash 值不会带给服务器
  3. hash 模式：
    1. 地址中永远带着 # 号，不美观
    2. 若以后将地址通过第三方手机 app 分享，若 app 校验严格，则地址会被标记为不合法
    3. 兼容性较好
  4. history 模式
    1. 地址干净，美观
    2. 兼容性和 hash 模式相比略差
    3. 应用部署上线时需要后端人员支持，解决刷新页面服务端 404 的问题

路由懒加载

  • component: Hawaii 的写法，在应用加载时，所有的路由组件都直接一次性加载完毕，且都在一个 app.js 文件里
  • component: () => import("./views/Brazil") 的写法，可以按需引入，也就是路由对应的组件在使用时才会被引入下载
  • component: () => import(/* webpackChunkName: "about" */ "./views/About.vue") 的写法不仅可以使路由懒加载，还能够定义 webpack 代码分割打包后包的名字，这里的意思是，路由 about 对应的组件在使用到时才会加载，且加载的 js 文件名字是 about.js image.png
avatar
文章
阅读
粉丝