vue-router学习笔记

本文档构建于:2023年1月18日

“vue-router”: “^4.1.6”

参考学习

  1. vue-router官网

    https://router.vuejs.org/zh/

安装

npm install vue-router@4

入门-路由使用步骤

1.创建路由

例如创建router/index.js文件

// router/index.js
// 1. 导入路由组件
import Home from './compontent/Home.vue'
import ABout from './component/About.vue'
import {
    createRouter, createWebHashHistory } from 'vue-router' //为了简单起见,我们在这里使用 hash 模式

// 2. 定义一些路由规则
const routes = [
    {
    path: '/home', component: Home },
    {
    path: '/about', component: About },
]

// 3. 创建路由实例并传递 `routes` 配置
const router = createRouter({
   
    history: VueRouter.createWebHashHistory(), //内部提供了 history 模式的实现。为了简单起见,我们在这里使用 hash 模式。
    routes, // `routes: routes` 的缩写
})

// 4. 暴露路由
export default router

创建路由成功后,在入口文件中导入路由,然后挂载到根实例app上。

// main.js
import router from './router/index.js'

app.use(router)

2.使用路由

在组件中使用路由,分别使用 <router-link>创建链接 和 <router-view> 显示路由组件内容。

<!--使用 router-link 组件进行导航 -->
<!--通过传递 `to` 来指定链接 -->
<!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
<!-- 如果需要传递变量,可以用模板字符串 -->
<router-link :to="`/users/${id}`">About</router-link>

<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

其它

如果在模板中想要获取路由中的参数可以使用 useRoute() useRouter()

import {
    useRoute, useRouter } from 'vue-router'

//在模板中使用
<h3>id: useRoute().params.id</h3>
//或者
<h3>id: {
   {
    $route.params.id }}</h3>

useRoute() 是获取当前路由。

动态路由匹配

很多时候,我们需要把一些 给定匹配模式(类似匹配规则)的路由映射到一个组件,这个时候需要动态传入一些参数到路由中,我们可以在定义路由规则时使用要给动态的字段来实现,我们称之为 路径参数

路径参数 用冒号 : 表示。当一个路由被匹配时,它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。

const routes = [
    {
    path: '/users/:id', conponent: User }
]

现在像 /users/johnny/users/jolyne 这样的 URL 都会映射到同一个路由。

响应路由参数的变化

使用带有参数的路由时需要注意的是,当用户从 /users/johnny 导航到 /users/jolyne 时,相同的组件实例将被重复使用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会被调用

要对同一个组件中参数的变化做出响应的话,你可以简单地 watch $route 对象上的任意属性,在这个场景中,就是 $route.params

import {
    watch } from 'vue'

嵌套(多级)路由

路由嵌套就是多级渲染<router-view>的使用,定义路由规则时使用children

//定义路由规则
const routes = [
    {
   
        path: '/user/:id',
        component: User, //匹配 /user/:id
        children: [
            {
   
                path: 'posts', //匹配 /user/:id/posts
                component: UserPosts
            }
        ]
    }
]

//模板渲染
//App.vue 渲染 User.vue 组件
<router-view></router-view>

//User.vue 渲染 UserPosts.vue 组件
<router-view></router-view>

上面代码中匹配的路由是/user/1/posts ,但是当访问路由是/user/1的时候就匹配不到,在这种情况下,可以提供一个空的嵌套路径

//定义路由规则
const routes = [
    {
   
        path: '/user/:id',
        component: User, //匹配 /user/:id
        children: [
            {
   
                path: '', //空的嵌套路径 匹配 /user/:id
                component: UserPosts, //可以指定一个默认的组件
            },
            {
   
                path: 'posts', //匹配 /user/:id/posts
                component: UserPosts
            }
        ]
    }
]

编程式路由导航

当你点击 <router-link> 时,内部会调用 router.push 方法,这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,会回到之前的 URL。另外,点击 <router-link :to="..."> 相当于调用 router.push(...)

声明式 编程式
<router-link :to="..."> router.push(...)

该方法的参数可以是一个字符串路径,或者一个描述地址的对象。例如:

// 字符串路径
router.push('/user')

// 带有路径的对象
router.push({
    path: '/user' })

// 命名的路由,并加上参数,让路由建立 url
router.push({
    name: 'user', params: {
    id: '1' } })

// 带查询参数,结果是 /register?plan=private
router
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值