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

目录

一、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，效果为：