vue3路由详解，从0开始手动配置路由（vite，vue-router）

news/2024/7/7 20:34:08

 创建一个不含路由的vue项目

（查看路由配置可以直接跳过这一段）

输入npm指令，然后写一个项目名称，之后一路回车即可

npm create vue@latest

注意这里我们不选引入vue router，成功后可以 查看目录

然后按提示信息输入指令，进入项目，安装node包，并启动项目

  cd myRouter
  npm install
  npm run dev

最后创建完成的目录 

成功启动了一个vue项目，接下面我们开始配置路由

配置路由

首先我们在src目录下新建两个文件夹，router和view

然后分别在这两个目录下创建几个新文件

安装vue-router包

npm install vue-router --save

安装完成后可以在package.json中查看

成功安装后我们再配置views下的home.vue，about.vue和router下的index.js

home.vue: 

<script setup>//组合式API
import { ref,reactive,onMounted } from 'vue';

</script>

<template>
<p>home</p>
</template>

<style scoped>
/* 当 <style> 标签带有 scoped attribute 的时候，它的 CSS 只会影响当前组件的元素 */

</style>

about.vue: 

<script setup>//组合式API
import { ref,reactive,onMounted } from 'vue';

</script>

<template>
<p>about</p>
</template>

<style scoped>
/* 当 <style> 标签带有 scoped attribute 的时候，它的 CSS 只会影响当前组件的元素 */

</style>

 index.js:

import { createRouter,createWebHashHistory } from "vue-router";
import home from "../views/home.vue";

const routes = [
    {
        path:"/", //路径描述
        name:"home",
        component: home // 主动引用，无论是否访问均加载页面
    },
    {
        path:"/about",
        name:"about",
        component: ()=> import("../views/about.vue")// 异步加载的路由的组件位置,只有页面被访问才加载
    }
]

const router = createRouter({
    history:createWebHashHistory(), // 跳转方式
    routes :routes // 路由配置
})
export default router

        这要注意index.js中的 routes，这里是配置了页面的跳转路径和路径，同时设置了页面的加载方式，component异步的加载方式可以优化主页面的加载（通常我们选择主页直接加载页面，而其他页面选择异步加载），而跳转方式我们尽量使用createWebHashHistory()方法

配置好路由页面和路由后，我们将它从入口文件（main.js,app.vue)导入进项目，

main.js:

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index';

createApp(App).use(router).mount('#app');

app.vue:

<script setup>
import {RouterLink,RouterView} from "vue-router"
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
  </header>

  <main>
    <router-link to="/">home</router-link>
    <router-link to="/about">about</router-link>
    <router-view></router-view>
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

 在app.vue中router-link的作用是导航跳转，通过to属性跳转页面，to的值为index.js中的routes的path跳转路径，router-view的作用是展示页面，跳转的页面在这个标签内展示

可以看到实现了基本的单页面跳转

路由传参

        页面直接跳转还可以传递参数，在实际应用中，我们可以通过不同的参数在同一个网页展示不同的信息

我们下view下新建两个文件 news.vue , newData.vue

news.vue：

<script setup>//组合式API
import { ref,reactive,onMounted } from 'vue';

</script>

<template>
<p>news</p>
<ul>
    <li><router-link to="/newData/新闻1">new1</router-link></li>
    <li><router-link to="/newData/新闻2">new2</router-link></li>
    <li><router-link to="/newData/新闻3">new3</router-link></li>
</ul>
</template>

<style scoped>
/* 当 <style> 标签带有 scoped attribute 的时候，它的 CSS 只会影响当前组件的元素 */

</style>

newData.vue： 

<script setup>//组合式API
import { ref,reactive,onMounted } from 'vue';

</script>

<template>
<p>这里展示的是{{ $route.params.key }}</p>
</template>

<style scoped>
/* 当 <style> 标签带有 scoped attribute 的时候，它的 CSS 只会影响当前组件的元素 */

</style>

然后再配置index.js:

import { createRouter,createWebHashHistory} from 'vue-router'
import home from '../views/home.vue'
const routes = [
    {
        path:'/',
        name:'home',
        component: home
    },
    {
        path:'/about',
        name:'about',
        component: ()=> import('../views/about.vue')
    },
    {
        path:'/news',
        name:'news',//路由的名称
        component: ()=> import('../views/news.vue')
    },
    {
        path:"/newData/:key",
        name:"newData",
        component: ()=> import('../views/newData.vue')
    }
]
const router = createRouter({
    history:createWebHashHistory(),
    routes:routes
})
export default router;

这里要注意 news.vue中的跳转标签属性to除了指向newData.vue之外，还带有一个参数，这个参数在index.js中用:key来表示，在newData.vue中通过$route.params.key获取（这里的key就是:key,可以自行定义）

这样我们就成功实现了页面跳转时传递参数

嵌套路由

        除了传递参数能向下访问页面，还有另一种方式也可以向下访问页面，也就是二级导航（会保留导航）

        我们在view文件夹下新建一个文件夹aboutViews,并在aboutViews文件夹下新建aboutA.vue和aboutB.vue

aboutA.vue:

<script setup>//组合式API
import { ref,reactive,onMounted } from 'vue';

</script>

<template>
<p>关于信息A</p>
</template>

<style scoped>
/* 当 <style> 标签带有 scoped attribute 的时候，它的 CSS 只会影响当前组件的元素 */

</style>

aboutB.vue:

<script setup>//组合式API
import { ref,reactive,onMounted } from 'vue';

</script>

<template>
<p>关于信息B</p>
</template>

<style scoped>
/* 当 <style> 标签带有 scoped attribute 的时候，它的 CSS 只会影响当前组件的元素 */

</style>

然后再修改about.vue和index.js

about.vue:

<script setup>//组合式API
import { ref,reactive,onMounted } from 'vue';

</script>

<template>
    <div>
        <router-link to="/about/A">A</router-link>
        <router-link to="/about/B">B</router-link>
        <router-view></router-view>
    </div>

</template>

<style scoped>
/* 当 <style> 标签带有 scoped attribute 的时候，它的 CSS 只会影响当前组件的元素 */

</style>

index.js:

import { createRouter,createWebHashHistory} from 'vue-router'
import home from '../views/home.vue'
const routes = [
    {
        path:'/',
        name:'home',
        component: home
    },
    {
        path:'/about',
        name:'about',
        component: ()=> import('../views/about.vue'),
        children:[
            {
                path: "A" ,//注意这里不加'/'
                component: ()=> import("../views/aboutViews/aboutA.vue"),
            },
            {
                path:'B',
                component: ()=> import('../views/aboutViews/aboutB.vue')
            }
        ]
    },
    {
        path:'/news',
        name:'news',//路由的名称
        component: ()=> import('../views/news.vue')
    },
    {
        path:"/newData/:key",
        name:"newData",
        component: ()=> import('../views/newData.vue')
    }
]
const router = createRouter({
    history:createWebHashHistory(),
    routes:routes
})
export default router;

        在about.vue中添加router-link和router-view标签，并加上2级路径，然后在index.js的about的路由属性中添加children属性，在children属性绑定对应的2级路由

这里就成功实现了2级路由

到这里我们就成功的手动搭建路由，并实现了多种路由的方式

系统路由

完成了手动路由，我们可以参照对比一下系统路由的结构

重新新建一个项目

npm create vue@latest

这里我们选择引入vue Router构建项目，其他的不变选择默认即可

我们进入目录可以看到在src下已经有router和views文件夹以及对应的文件，

package.json文件中也有vue-router包

启动项目查看

通过这个路由的url可以知道，系统路由默认是采用的createWebHistory（）方法进行跳转

        其他的基本格式都没有区别，了解了手动搭建路由后，在新项目中配置路由就可以使用系统路由并在此基础上进行一定的修改，这样可以很大程度的提高开发效率


http://lihuaxi.xjx100.cn/news/2196543.html

相关文章

【96】write combine机制介绍

【96】write combine机制介绍

前言 这篇文章主要介绍了write combine的机制 一、write combine的试验 1.系统配置 &#xff08;1&#xff09;、CPU&#xff1a;11th Gen Intel(R) Core(TM) i7-11700 2.50GHz &#xff08;2&#xff09;、GPU&#xff1a;XX &#xff08;3&#xff09;、link status&am…
阅读更多...
力扣1574.删除最短的子数组使剩余数组有序

力扣1574.删除最短的子数组使剩余数组有序

力扣1574.删除最短的子数组使剩余数组有序 剩下有序 –> 前面一段 后面一段 有序 前面有序 后面有序 前面最后一项 < 后面第一项先反向遍历找到right的最小值然后正向遍历找left的最大值当nums[left] > nums[right]时 right class Solution {public:int findLen…
阅读更多...
HTML label 标签的作用和应用场景

HTML label 标签的作用和应用场景

label 标签 作用和语法 label 标签来定义表单控制间的关系&#xff0c;当用户点击该标签时&#xff0c;浏览器会自动将焦点转到和标签相关的表单控件上。 <label for"Name">Number:</label> <input type“text“ name"Name" id"Name…
阅读更多...
[AI OpenAI] 提取GPT-4中的概念

[AI OpenAI] 提取GPT-4中的概念

总结&#xff1a; 研究人员采用新的可扩展方法&#xff0c;将GPT-4的内部表示分解为1600万个通常可解释的模式&#xff0c;这些模式被称为“特征”&#xff0c;目的是提高语言模型的透明度和可解释性。通过使用稀疏自编码器&#xff0c;研究人员能够识别与特定概念相关的特征&…
阅读更多...
《精通ChatGPT：从入门到大师的Prompt指南》第1章：认识ChatGPT

《精通ChatGPT：从入门到大师的Prompt指南》第1章：认识ChatGPT

第1章&#xff1a;认识ChatGPT 1.1 ChatGPT是什么 ChatGPT&#xff0c;全称为Chat Generative Pre-trained Transformer&#xff0c;是由OpenAI开发的一种先进的自然语言处理模型。它利用了深度学习中的一种技术——Transformer架构&#xff0c;来生成类人文本。ChatGPT通过对…
阅读更多...
Android 车载 Audio 中 有关系统按键无声的问题排查小结

Android 车载 Audio 中 有关系统按键无声的问题排查小结

本文简单记录一下&#xff0c;车载中系统按键音的问题排查从 App --> FrameWork --> HAL层　的问题排查。 通过日志分析&#xff1a; AudioStreamOutSink 这个有数据写入到 HAL 中&#xff08;方式一&#xff09; 查看 dump 文件。&#xff08;方式二&#xff09; 先 …
阅读更多...
PostgreSQL中有没有类似Oracle的dba_objects系统视图

PostgreSQL中有没有类似Oracle的dba_objects系统视图

PostgreSQL中有没有类似Oracle的dba_objects系统视图 在PostgreSQL中&#xff0c;没有一个完全集成了所有对象信息的视图&#xff08;类似于Oracle中的DBA_OBJECTS&#xff09;。但是&#xff0c;PostgreSQL提供了一些系统目录表和视图&#xff0c;可以用来获取数据库对象的信…
阅读更多...
鸿蒙轻内核M核源码分析系列十九 Musl LibC

鸿蒙轻内核M核源码分析系列十九 Musl LibC

LiteOS-M内核LibC实现有2种&#xff0c;可以根据需求进行二选一&#xff0c;分别是musl libC和newlibc。本文先学习下Musl LibC的实现代码。文中所涉及的源码&#xff0c;均可以在开源站点 https://gitee.com/openharmony/kernel_liteos_m 获取。LiteOS-M内核提供了和内核相关的…
阅读更多...
最新文章

Copyright @ 2022~2023