Vue3 中路由Vue Router 的使用

目录

  • 前言:
  • 一、什么是 Vue Router ?
  • 二、路由的使用
    • 1、路由的安装
    • 2、路由的模式
    • 3、创建路由模块
    • 4、声明路由链接和占位符
  • 三、路由的重定向和别名
  • 四、嵌套路由
  • 五、声明式和编程式导航
    • 1、声明式导航
    • 2、编程式导航
    • 3、替换当前位置
    • 4、路由历史
  • 总结:

前言:

在编写vue里的SPA(Single Page Application单页面应用)时,我们始终绕不开路由的使用,vue-router4.0版里有一些重要更新,在这里分享给大家。


一、什么是 Vue Router ?

vue-router是vue.js官方给出的路由解决方案,能够轻松的管理SPA项目中组件的切换

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。功能包括:

  • List item
  • 嵌套路由映射
  • 动态路由选择
  • 模块化、基于组件的路由配置
  • 路由参数、查询、通配符
  • 展示由 Vue.js 的过渡系统提供的过渡效果
  • 细致的导航控制
  • 自动激活 CSS 类的链接
  • HTML5 history 模式或 hash 模式
  • 可定制的滚动行为
  • URL 的正确编码

二、路由的使用

1、路由的安装

npm install vue-router@4

2、路由的模式

  • createWebHashHistory():Hash模式
    • 它在内部传递的实际URL之前使用了一个哈希字符#,如 https://example.com/#/user/id
    • 由于这部分 URL 从未被发送到服务器,所以它不需要在服务器层面上进行任何特殊处理
  • createWebHistory():history模式,推荐使用
    • 当使用这种历史模式时,URL会看起来很“正常”,如 https://example.com/user/id
    • 由于我们的应用是一个单页的客户端应用,如果没有适当的服务器配置,用户在浏览器中直接访问https://example.com/user/id,就会得到一个404错误;要解决这个问题,你需要做的就是在你的服务器上添加一个简单的回退路由,如果URL不匹配任何静态资源,它应提供与你的应用程序中的index.html相同的页面

3、创建路由模块

  1. 在项目中的src文件夹中创建一个router文件夹,在其中创建index.js模块
  2. 采用createRouter()创建路由,并暴露出去
  3. 在main.js文件中初始化路由模块app.use(router)
// router/index.js

import { createRouter, createWebHistory } from "vue-router";
import HomeView from '@/views/HomeView.vue'

// 创建路由规则
let routes = [
    {
        path: '/', // URL 地址
        name: 'home',  // 名称
        component: HomeView  // 渲染该组件
    },
]

// 创建路由
const router = createRouter({
    // 使用 history 模式
    history: createWebHistory(),
    // 路由规则
    routes
})

// 将路由对象暴露出去
export default router



// main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'  // 引入路由模块
let app = createApp(App)

app.use(router) // 初始化路由插件

app.mount('#app')

4、声明路由链接和占位符

  • < router-link>:路由链接,to属性则为点击此元素,需要切换的路由地址
  • < router-view>:路由占位符,路由切换的视图展示的位置


三、路由的重定向和别名

在路由规则中,可采用redirect来重定向另一个地址

// 路径写法
const routes = [{ path: '/home', redirect: '/' }]
// 命名写法
const routes = [{ path: '/home', redirect: { name: 'home' } }]
]

别名表示访问url时自由命名,不受约束,router会自动进行别名匹配,就像我们设置/的别名为/home,相当于访问 /

// alias是别名的key
const routes = [{ path: '/', component: HomeView, alias: '/home' }]

四、嵌套路由

如果在路由视图中展示的组件中包含自己的路由占位符,则此处会用到嵌套路由
如图所示:点击关于链接,则会显示About组件,在其组件中又包含了路由链接和路由占位符
Vue3 中路由Vue Router 的使用_第1张图片
嵌套路由规则

  1. 在某一个路由规则中采用children来声明嵌套路由的规则
  2. 嵌套路由规则中的path不能以/开头,访问需使用/father/son的形式
// router/index.js

{
    path: '/father',
    name: 'father',
    component:  () => import('@/views/father.vue'),
    // 嵌套路由
    children: [
        {
            path: 'son', // path 前面不要加 /
            name: 'son',
            component: () => import('@/views/son.vue')
        },
    ]
}


// father.vue 页面


五、声明式和编程式导航

声明式 编程式 描述
< router-link :to=“…”> router.push(…) 会向history栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,会回到之前的URL

1、声明式导航

  1. 很多时候,我们需要将给定匹配模式的路由映射到同一个组件,例如:想渲染不同博客的内容,其>实只是渲染到同一个组件上,只是博客的编号不同而已
  2. 在Vue Router中,可以在路径中使用一个动态字段来实现,我们称之为“路径参数” ,语法如:path: ‘/url/:param’
  3. 在展示的组件中访问路径参数
    3.1. 在选项式 APIJS中采用this. r o u t e . p a r a m s 来访问,试图模板上采用 route.params来访问,试图模板上采用 route.params来访问,试图模板上采用route.params来访问
    3.2. 在组合式 API 中,需要import { useRoute } from ‘vue-router’,JS和视图模板上通过useRoute().params来访问
    3.3. 还可以通过在路由规则上添加props: true,将路由参数传递给组件的props中
// router/index.js
{
    path: '/father',
    name: 'father',
    component:  () => import('@/views/father.vue'),
    // 嵌套路由
    children: [
        {
            path: 'son/:id', // path 前面不要加 / (路径传参)
            name: 'son',
            component: () => import('@/views/son.vue'),
            props: true  // 将路径参数传递到展示组件的 props 中
        },
    ]
}


// father.vue



// son.vue 选项式





// son.vue 组合式




2、编程式导航

提示:

编程式的router.push(…)的语法

  1. 其的参数可以是一个字符串路径,或者一个描述地址的对象
  2. 如果参数是描述地址的对象的话,其对象中path和params不能同时使用
// 编程式导航
const username = 'eduardo'

// 我们可以手动建立 url,但我们必须自己处理编码
router.push(`/user/${username}`) // -> /user/eduardo

// 同样
router.push({ path: `/user/${username}` }) // -> /user/eduardo

// 如果可能的话,使用 `name` 和 `params` 从自动 URL 编码中获益(params名必须和 router规则中的名一致)
router.push({ name: 'user', params: { username } }) // -> /user/eduardo

// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user

3、替换当前位置

声明式 编程式 描述
< router-link :to=“…” replace> router.replace(…) 它的作用类似于router.push(…),唯一不同的是,它在导航时不会向history添加新记录,正如它的名字所暗示的那样,它取代了当前的条目

提示:

也可以直接在传递给router.push的routeLocation中增加一个属性replace: true
router.push({ path: '/home', replace: true })

// 相当于
router.replace({ path: '/home' })

4、路由历史

router.go(n) 该方法采用一个整数作为参数,表示在历史堆栈中前进或后退多少步,类似于 window.history.go(n)

// 向前移动一条记录,与 router.forward() 相同
router.go(1)

// 返回一条记录,与 router.back() 相同
router.go(-1)

// 前进 3 条记录
router.go(3)

// 如果没有那么多记录,静默失败
router.go(-100)
router.go(100)

总结:

欢迎大家加入我的社区,在社区中会不定时发布一些精选内容:https://bbs.csdn.net/forums/db95ba6b828b43ababd4ee5e41e8d251?category=10003


以上就是 Vue3 中路由Vue Router 的使用,不懂得也可以在评论区里问我或私聊我询问,以后会持续发布一些新的功能,敬请关注。
我的其他文章:https://blog.csdn.net/weixin_62897746?type=blog

你可能感兴趣的:(vue3,vue.js,javascript,前端)