目录
上篇《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
2.2.3 App.vue显示模板
显示模板已经有了 <router-view/> 我也不添加导航了,所以不动它。
2.3 效果
运行它,访问 http://<IP>:8080/name/<名字>,我这里为http://localhost:8080/name/hualinux,效果为: