vue-router基础知识

明天一定早睡_

已于 2023-11-29 10:54:07 修改

阅读量408

点赞数 5

分类专栏： vue 文章标签： vue.js javascript 前端

于 2023-11-29 10:37:45 首次发布

本文链接：https://blog.csdn.net/m0_70033038/article/details/134684231

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

vue-router

1 安装路由

命令如下：

npm install vue-router@4

在src目录下面新建router 文件然后在router 文件夹下面新建 index.ts

//引入路由对象
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 
//路由数组的类型 RouteRecordRaw
// 定义一些路由
// 每个路由都需要映射到一个组件。
const routes: Array<RouteRecordRaw> = [{
    path: '/',
    component: () => import('../components/a.vue')
},{
    path: '/register',
    component: () => import('../components/b.vue')
}]
 
 
 
const router = createRouter({
    history: createWebHistory(),//跳转页面不会带＃号
    routess
})
 
//导出router
export default router

createRouter 是 Vue Router 提供的一个函数，用于创建路由实例。

history: createWebHistory() 是路由实例的配置项，它用于指定路由的历史模式。在这里，我们使用 createWebHistory() 创建了一个 Web 历史模式对象，它将使用浏览器的 History API 来管理路由的历史记录。

routes 是一个定义路由配置的数组，它描述了应用程序中的不同路由及其对应的组件。

每个路由对象由 path 和 component 属性组成。

path 表示页面路径，是 URL 中对应的路径地址。

component 是路由对应的组件，可以是一个已经定义的组件或使用 import 导入的组件

router-view和router-link

router-view：路由出口，路由匹配到的组件将渲染到这里。

router-link：Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。

<template>
  <div>
    <h1>zhangsan</h1>
    <div>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!-- to和路由定义的path名一致 -->
      <router-link tag="div" to="/">跳转a</router-link>
      <router-link tag="div" style="margin-left:200px" to="/register">跳转b</router-link>
    </div>
    <hr />
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

2 命名路由

const routes:Array<RouteRecordRaw> = [
    {
        path:"/",
        name:"Login",
        component:()=> import('../components/login.vue')
    },
    {
        path:"/reg",
        name:"Reg",
        component:()=> import('../components/reg.vue')
    }
]

此时router-link的配置需要发生改变，例如

<!-- 命名路由 -->
<router-link :to="{ name: 'login' }">login</router-link>

3 编程式导航

可以借助 router 的实例方法，通过编写代码来实现。

<button @click="toPage('login')">LOGIN</button>
<button @click="toPage('reg')">reg</button>
<!-- 不建议使用a标签因为会刷新页面 -->

字符串模式

import { useRouter } from 'vue-router'
const router = useRouter()
 
const toPage = () => {
  router.push('/reg')
}

对象模式

import { useRouter } from 'vue-router'
const router = useRouter()
 
const toPage = () => {
  router.push({
    path: '/reg'
  })
}

命名式路由模式

import { useRouter } from 'vue-router'
const router = useRouter()
 
const toPage = () => {
  router.push({
    name: 'Reg'// 注意上面的toPage传参就不能写/了需要直接写router里定义好的name
  })
}

4 历史记录

采用replace进行页面的跳转会同样也会创建渲染新的Vue组件但是在history中其不会重复保存记录，而是替换原有的vue组件

 <!-- 添加replace就会不保留历史记录 点网页箭头不会返回 -->
<router-link replace to="/">login</router-link>

编程式导航不预留历史记录

const toPage = (url: string) => {
  router.replace(url)
}

当没有历史记录的时候可以写一些逻辑使得页面回退

<button @click="next()">reg</button>
<button @click="prev()">prev</button>

const next = () => {
  router.go(1);
}

const prev = () => {
  router.back()
}

5 嵌套路由

const routes: Array<RouteRecordRaw> = [
    {
        path: "/user",
        component: () => import('../components/footer.vue'),
        children: [
            {
                //子路由里面不能在path加斜杠不然会出现子路由无法显示
                path: "",
                name: "Login",
                component: () => import('../components/login.vue')
            },
            {
                path: "reg",
                name: "Reg",
                component: () => import('../components/reg.vue')
            }
        ]
    },
 
]

children 配置只是另一个路由数组，就像 routes 本身一样。所以可以嵌套多个children

如果父路由的path命名不是\那么在写router-link的时候，子路由就需要再多套一层

 <router-link to="/user/reg">reg</router-link>

6 命名视图

命名视图的概念非常类似于具名插槽，并且视图的默认名称也是 default。它可以在同一级（同一个组件）中展示更多的路由视图，而不是嵌套显示。命名视图可以让一个组件中具有多个路由渲染出口

对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 
 
const routes: Array<RouteRecordRaw> = [
    {
        path: "/",
        components: {
             //代表默认跳转的位置
             default: () => import('../components/A.vue')，
             sidebar: () => import('../components/B.vue')，
      		 main: () => import('../components/C.vue')，

        }
    },
]
 
const router = createRouter({
    history: createWebHistory(),
    routes
})
 
export default router

在模板中使用命名视图时，可以使用<router-view>组件，并通过name属性指定要渲染的命名视图。示例代码如下：

<router-view></router-view>
<router-view name="sidebar"></router-view>
<router-view name="main"></router-view>

7 重定向/别名

字符串形式配置

const routes: Array<RouteRecordRaw> = [
    {
        path:'/',
        component:()=> import('../components/root.vue'),
        //表示当访问 path: '/'的时候会直接跳转到user1
        redirect:'/user1',
        children:[
            {
                path:'/user1',
                components:{
                    default:()=> import('../components/A.vue')
                }
            },
            {
                path:'/user2',
                components:{
                    bbb:()=> import('../components/B.vue'),
                    ccc:()=> import('../components/C.vue')
                }
            }
        ]
    }
]

对象形式配置

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        component: () => import('../components/root.vue'),
        redirect: { path: '/user1' },
        children: [
            {
                path: '/user1',
                components: {
                    default: () => import('../components/A.vue')
                }
            },
            {
                path: '/user2',
                components: {
                    bbb: () => import('../components/B.vue'),
                    ccc: () => import('../components/C.vue')
                }
            }
        ]
    }
]

函数模式（可以传参）

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        component: () => import('../components/root.vue'),
        redirect: (to) => {
            return {
                path: '/user1',
                query: {
                     name: 'zhangsan'
                 }
            }
        },
        children: [
            {
                path: '/user1',
                components: {
                    default: () => import('../components/A.vue')
                }
            },
            {
                path: '/user2',
                components: {
                    bbb: () => import('../components/B.vue'),
                    ccc: () => import('../components/C.vue')
                }
            }
        ]
    }
]

alias别名可以给这个路由起多个名字但是访问的组件是同一个

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        component: () => import('../components/root.vue'),
        alias:["/root","/root2","/root3"],
        children: [
            {
                path: 'user1',
                components: {
                    default: () => import('../components/A.vue')
                }
            },
            {
                path: 'user2',
                components: {
                    bbb: () => import('../components/B.vue'),
                    ccc: () => import('../components/C.vue')
                }
            }
        ]
    }
]