hualinux 进阶 vue 3.2:vue router的编写规则

本文详细介绍了如何在Vue3.1项目中使用Vuerouter,包括路由链接、渲染规则、组件组织及一个动态路由实战示例。重点讲解了路由组件的编写、路径映射和App.vue的作用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录

一、router相关目录说明

1.1 路由链接和渲染App.vue

1.1.1 从App.vue代码中分析

1.1.2 小结

1.2 路由编写规则

1.3  路由组件

1.4 小结

二、例子

2.1 需求

2.2 实现代码

2.2.1 编写路由组件

2.2.2 添加路由

2.2.3 App.vue显示模板

2.3 效果


上篇《hualinux 进阶 vue 3.1:vue cli手工创建Vue router》讲了,如何使用vue cli创建带有router功能的项目。

这篇简单讲一下如何编写vue router,其实vue router官方指南介绍的挻不错的,而且可以选择中文,也方便英文差的学习。

我这里只教路由一些编写规则,带入门一下,其它的些功能,直接看vue router官方指南就行了,我这里不再讲了,重复一些东西,没意思。

一、router相关目录说明

上篇《hualinux 进阶 vue 3.1:vue cli手工创建Vue router》讲了,如何使用vue cli创建带有router功能的项目。

用vue cli创建带有router功能的项目已经帮我们创建了例子,配置好的路由,上篇那样,直接运行就行了,这样就很方便我们结合vue router官网进行分析。

我这里再讲细一下vue router方面的。

1.1 路由链接和渲染App.vue

1.1.1 从App.vue代码中分析

我们默认创建的都是单页应用,所以只有一个展示页面,也就是为什么public目录只有一个html的原因。而vue中展示统一放在App.vue根组件中,

因为只有App.vue才有<router-view/>,根据vue router官方例子说明所知道的。

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

而在App.vue中还有<router-link>标签,相当于<a>链接,官方也做了说明

  <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>

PS:至于为什么不直接使用<a>标签有兴趣的可以搜索一下

1.1.2 小结

App.vue就是显示模板,就是访问所有路径,都终都会放在App.vue中展示出来。

 

1.2 路由编写规则

路由的编写主要是 src/router/index.js文件,使用vue cli创建默认已经帮默认了2个路由,一个是“/”,一个是"/about",如下图所示:

再结合官方

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

这样能知道这个是路径与组件的绑定。这里的组件是src/views目录中的组件(路由组件),而组件引用其它普通组件不是显示使用的,可以放在src/components组件中。

1.3  路由组件

路由组件统一放在src/views目录中。

About.vue代码如下:

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

Home.vue代码如下:

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

从上面代码知道,Home组件引用了普通组件的HelloWorld组件作为子组件。

1.4 小结

通过前面1.1-1.3分析就知道怎么写路由了吧

  1. 编写路由组件。在src/views中先编写路由组件,如果此组件还有子组件可以放在src/components目录中
  2. 编写路由规则。src/router/index.js添加路由,实现路径与组件的映射(也可以叫绑定)
  3. 模板中添加功能。在src/App.vue添加自己要的东西,比如官方例子中这引路径的链接。

注:所有组件处理的结果都在App.vue的<router-view/>处展示。所以App.vue变成了总的展示模板了(可以理解成主页了),这样可以添加一些导航功能

PS:即期App.vue是主页,我们可以设置头部,底部。这样所有页面展示都有共用的头部、底部了。

二、例子

2.1 需求

我这里写一个简单的例子,打印别人的名字,输入路径规则为“/name/<名字>”

比如:“/name/hualinux”

会打印"你好,hualinux"

这里我就不在App.vue显示模板中添加导航了

相关知识点,可以看一下vue router中的《动态路由匹配

2.2 实现代码

2.2.1 编写路由组件

在src/views目录下创建一个名为SayHello.vue

它会自动添加一些基础代码,如下所示:

<template>

</template>

<script>
export default {
  name: "SayHello"
}
</script>

<style scoped>

</style>

主要填写一些东西即可,我写的代码如下:

<template>
  <p>你好,{{$route.params.name}}</p>
</template>

<script>
export default {
  name: "SayHello"
}
</script>

<style scoped>

</style>

2.2.2 添加路由

打开src/router/index.js,在 “const routes = [...]”中添加如下代码

,
  {
    path: '/name/:name',
    name:'Name',
    component: () => import('../views/SayHello.vue')
  }  

PS:因为数组成员之间要用逗号隔离,所以前面要加一个逗号

总代码如下:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/name/:name',
    name:'Name',
    component: ()=>import('../views/SayHello.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

2.2.3 App.vue显示模板

显示模板已经有了  <router-view/> 我也不添加导航了,所以不动它。

2.3 效果

运行它,访问 http://<IP>:8080/name/<名字>,我这里为http://localhost:8080/name/hualinux,效果为:

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值