vue-router的学习笔记--1

最新推荐文章于 2023-12-20 15:17:34 发布

weixin_41458672

最新推荐文章于 2023-12-20 15:17:34 发布

阅读量183

点赞数

本文介绍Vue.js中的路由管理工具vue-router的安装与基本使用方法，包括配置路由规则、创建导航链接等，帮助开发者快速上手。

简介：

由于Vue在开发时对路由支持的不足，后来官方补充了vue-router插件，它在Vue的生态环境中非常重要，在实际开发中只要编写一个页面就会操作vue-router。要学习vue-router就要先知道这里的路由是什么？这里的路由并不是指我们平时所说的硬件路由器(学习本篇之前我还真这么以为的哈)，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统，简单的可以理解为控制页面的跳转按键。

开始我也会这样疑虑，为什么我们不能像原来一样直接用<a></a>标签编写链接哪？但回顾前面所学的Vue的应用结构，发现我们用Vue作的都是单页应用，就相当于只有一个主的index.html页面，所以你写的<a></a>标签是不起作用的，你必须使用vue-router来进行管理。

第1节：Vue-router入门

安装vue-router

vue-router是一个插件包，所以我们还是需要用npm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

1
npm install vue-router --save-dev

如果你安装很慢，也可以用cnpm进行安装，如果你在使用vue-cli中已经选择安装了vue-router，那这里不需要重复安装了。

解读router/index.js文件

我们用vue-cli生产了我们的项目结构，你可以在src/router/index.js文件，这个文件就是路由的核心文件，我们先解读一下它。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Hello from '@/components/Hello'  //引入根目录下的Hello.vue组件
 
Vue.use(Router)  //Vue全局使用Router
 
export default new Router({
  routes: [              //配置路由，这里是个数组
    {                    //每一个链接都是一个对象
      path: '/',         //链接路径
      name: 'Hello',     //路由名称，
      component: Hello   //对应的组件模板
    }
  ]
})

上边的代码中已经对每行都进行了注释，其实在这个路由文件里只配置了一个功能，就是在进入项目时，显示Hello.vue里边的内容代码。

增加一个Hi的路由和页面

对路由的核心文件熟悉后，我们试着增加一个路由配置，我们希望在地址栏输入 http://localhost:8080/#/hi 的时候出现一个新的页面。

我们用vue-cli生产了我们的项目结构，你可以在src/router/index.js文件，这个文件就是路由的核心文件，我们先解读一下它。

import Vue from'vue' //引入Vue

import Router from'vue-router' //引入vue-router

import Hello from'@/components/Hello' //引入根目录下的Hello.vue组件

Vue.use(Router) //Vue全局使用Router

exportdefaultnewRouter({

routes:[ //配置路由，这里是个数组

{ //每一个链接都是一个对象

path:'/', //链接路径

name:'Hello', //路由名称，

component:Hello //对应的组件模板

}

]

})

上边的代码中已经对每行都进行了注释，其实在这个路由文件里只配置了一个功能，就是在进入项目时，显示Hello.vue里边的内容代码。

增加一个Hi的路由和页面

对路由的核心文件熟悉后，我们试着增加一个路由配置，我们希望在地址栏输入 http://localhost:8080/#/hi 的时候出现一个新的页面，先来看一下我们希望得到的效果。

看到了效果，我们看一下具体的操作步骤：

在src/components目录下，新建 Hi.vue 文件。

编写文件内容，和我们之前讲过的一样，文件要包括三个部分<template><script>和<style>。文件很简单，只是打印一句话。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
 
<script>
export default {
  name: 'hi',
  data () {
    return {
      msg: 'Hi, I am Miss.F'
    }
  }
}
</script>
 
 
<style scoped>
 
</style>

引入 Hi组件：我们在router/index.js文件的上边引入Hi组件
1
import Hi from '@/components/Hi'
增加路由配置：在router/index.js文件的routes[]数组中，新增加一个对象，代码如下。
1
2
3
4
5
{
  path:'/hi',
  name:'Hi',
  component:Hi
}

通过上面的配置已经可以增加一个新的页面了。是不是觉的自己的Vue功力一下子就提升了一个档次。为了方便小伙伴查看，贴出现在的路由配置文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Hello from '@/components/Hello'  //引入根目录下的Hello.vue组件
import Hi from '@/components/Hi' 
 
Vue.use(Router)  //Vue全局使用Router
 
export default new Router({
  routes: [              //配置路由，这里是个数组
    {                    //每一个链接都是一个对象
      path: '/',         //链接路径
      name: 'Hello',     //路由名称，
      component: Hello   //对应的组件模板
    },{
      path:'/hi',
      name:'Hi',
      component:Hi
    }
  ]
})

router-link制作导航

现在通过在地址栏改变字符串地址，已经可以实现页面内容的变化了。这并不满足需求，我们需要的是在页面上有个像样的导航链接，我们只要点击就可以实现页面内容的变化。制作链接需要<router-link>标签，我们先来看一下它的语法。

1
 <router-link to="/">[显示字段]</router-link>

to：是我们的导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 to=”/” ，
[显示字段] ：就是我们要显示给用户的导航名称，比如首页新闻页。

明白了router-link的基本语法，我们在 src/App.vue文件中的template里加入下面代码，实现导航。

1
2
3
4
<p>导航 ：
   <router-link to="/">首页</router-link>
   <router-link to="/hi">Hi页面</router-link>
</p>

现在我们访问页面：

进入项目，安装并运行：

$ cd my-project
$ cnpm install
$ cnpm run dev
 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

成功执行以上命令后访问 http://localhost:8080/，发现已经多出了导航。

总结：这节我们在vue-cli的构建下对vue-router有了一个基本的了解，学会了vue-router的核心文件的基本结构，学会了如何添加一个新的模板页面，还学会了用<router-link>标签设置导航。路由是Vue中最重点的内容，是必须完全掌握学会的。加油吧！下一节再见。