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

最新推荐文章于 2024-05-28 01:18:35 发布

hualinux

最新推荐文章于 2024-05-28 01:18:35 发布

阅读量841

点赞数

CC 4.0 BY-SA版权

分类专栏：进阶篇3 vue.js专业前端入门文章标签： hualinux vue vue router的编写 vue router例子

本文链接：https://blog.youkuaiyun.com/hualinux/article/details/115678847

进阶篇3 vue.js专业前端入门专栏收录该内容

32 篇文章

订阅专栏

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

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

上篇《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分析就知道怎么写路由了吧

编写路由组件。在src/views中先编写路由组件，如果此组件还有子组件可以放在src/components目录中
编写路由规则。src/router/index.js添加路由，实现路径与组件的映射（也可以叫绑定）
模板中添加功能。在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