Pinia+Router学习笔记(十一)

简介: 本节记录嵌套路由&命名视图相关内容

嵌套路由

嵌套路由即二级路由,作用在本身就是路由组件的组件中,可以提供无需刷新的部分页面跳转

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/user',
    name: 'Login',
    component: () => import('../components/footer.vue'),
    children: [
      {
        path: '',
        name: 'Login',
        component: () => import('../components/login.vue'),
      },
      {
        // 注意:这里的路径不能带有/,带有/的路径会被默认解析成根路径
        path: 'reg',
        name: 'Reg',
        component: import('../components/reg.vue'),
      },
    ],
  },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

export default router
<template>
    <div>
        <router-view></router-view>
        <hr />
        <h1>我是父路由</h1>
        <div>
<!--       通过router-link跳转,如果有需要也可以使用编程式路由导航 -->
            <router-link to="/user">login</router-link>
            <br>
            <router-link to="/user/reg">Reg</router-link>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

</script>

<style scoped></style>

命名视图

在router配置文件中可以利用components配置项定义一些视图,当URL处于对应页面并且组件中具有与之相对应的router-view name属性时将这些组件挂载到页面上

<template>
  <div>
    <hr />
    <h1>我是父路由</h1>
    <div>
      <router-view></router-view>
      <router-view name="user1"></router-view>
      <router-view name="user2"></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue'

</script>

<style scoped></style>
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'


const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'Login',
        component: () => import('../components/footer.vue'),
        children: [
            {
                path: '',
                name: 'Login',
                components: {
                  // 当url为/且footer.vue中有<router-view>时挂载(没有name属性,因为是default)
                    default: () => import('../components/B.vue'),
                },
            },
            {
                path: 'reg',
                name: 'Reg',
                components: {
                  // 当url为/reg且具备对应的<router-view name="组件名">时挂载
                    user1: () => import('../components/login.vue'),
                    user2: () => import('../components/reg.vue'),
                },
            },
        ],
    },
]


const router = createRouter({
    history: createWebHashHistory(),
    routes,
})


export default router

效果图:
image.png
image.png

相关文章
|
6月前
|
前端开发
如何使用react-router v6快速搭建路由?
如何使用react-router v6快速搭建路由?
128 0
|
1月前
|
缓存 网络架构
vue2进阶篇:vue-router之基础路由
vue2进阶篇:vue-router之基础路由
54 4
|
1月前
|
缓存 JavaScript 前端开发
vue2进阶篇:安装路由
vue2进阶篇:安装路由
58 2
|
1月前
|
缓存
vue2进阶篇:vue-router之路由的props配置
vue2进阶篇:vue-router之路由的props配置
26 0
|
1月前
|
缓存
vue2进阶篇:vue-router之路由的2种工作模式
vue2进阶篇:vue-router之路由的2种工作模式
27 0
|
6月前
|
JavaScript 网络架构 开发者
阿珊解说Vue中`$route`和`$router`的区别
阿珊解说Vue中`$route`和`$router`的区别
|
运维 JavaScript API
Vue-Router总结大全,从小白到精通,含vue3.0路由用法
Vue-Router总结大全,从小白到精通,含vue3.0路由用法
294 0
Vue-Router总结大全,从小白到精通,含vue3.0路由用法
|
存储 JavaScript 前端开发
Vue —— 进阶 vue-router 路由(零)(路由的概念、基本使用)
Vue —— 进阶 vue-router 路由(零)(路由的概念、基本使用)
100 0
Pinia+Router学习笔记(十二)
本节记录Vue-Router的两种路由重定向方式
123 0
Pinia+Router学习笔记(十四)
本节记录Vue-Router中路由过渡动效相关内容
112 0
下一篇
无影云桌面