Vue-router 第1节 Vue-router入门
第1节 Vue-router入门
简介:由于Vue在开发时对路由支持的不足,后来官方补充了vue-router插件,它在Vue的生态环境中非常重要,在实际开发中只要编写一个页面就会操作vue-router。要学习vue-router就要先知道这里的路由是什么?这里的路由并不是指我们平时所说的硬件路由器,这里的路由就是SPA(单页应用)的路径管理器。再通俗的说,vue-router就是我们WebApp的链接路径管理系统。
以前我们都是用<a></a>
标签来写链接,但是我们用Vue作的都是单页应用,就相当于只有一个主的index.html页面,所以你写的<a></a>
标签是不起作用的,你必须使用vue-router来进行管理。
安装vue-router
vue-router是一个插件包,所以我们需要用cnpm来进行安装。打开命令行工具,进入项目目录,输入下面命令:
npm install vue-router --save-dev
如果在使用vue-cli中已经选择安装了vue-router,这里不需要重复安装。
解读router/index.js文件
我们用vue-cli生产了我们的项目结构,可以在src/router/index.js
文件,这个文件就是路由的核心文件,我们先解读一下它。
import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入vue-router
import HelloWorld from '@/components/HelloWorld' //引入根目录下的HelloWorld.vue组件
Vue.use(Router) //Vue全局使用Router
export default new Router({
routes: [ //配置路由,这里是个数组
{ //每一个链接都是一个对象
path: '/', //链接路径
name: 'HelloWorld', //路由名称
component: HelloWorld //对应的组件模板
}
]
})
其实在这个路由文件里只配置了一个功能,就是在进入项目时,显示HelloWorld.vue里边的内容代码。
增加一个Hi的路由和页面
对路由的核心文件熟悉后,我们试着增加一个路由配置,我们希望在地址栏输入http://localhost:8080/#/hi
的时候出现一个新的页面,先来看一下我们希望得到的效果。
按以下步骤来:
- 在src/components目录下,新建Hi.vue文件;
- 编写内容,简单一点,像之前说的,文件包括三个部分
<template><script>
和<style>
。文件很简单,只打印一句话。
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'Hi',
data(){
return {
msg: 'Hi,I am Daisy'
}
}
}
</script>
<style scoped>
</style>
- 引入Hi组件:我们在
router/index.js
文件的上边引入Hi组件
import Hi from '@/components/Hi'
- 增加路由配置:在
router/index.js
文件的routes[]数组中,新增加一个对象,代码如下:
{
path: '/hi',
name: 'Hi',
component: Hi
}
这样已经可以增加一个新的页面了。
注:component的名字必须和import后面的名字一样,一个引入一个注册这样才能正确显示页面
router-link制作导航
现在通过在地址栏改变字符串地址,可以实现内容的变化了。我们需要的是在页面上有个像样的导航链接,我们只要点击就可以实现页面内容的变化。制作链接需要<router-link>
标签,我们先来看一下它的语法。
<router-link to="/">[显示字段]</router-link>
- to:导航路径,要填写的是你在
router/index.js
文件里配置的path值,如果要导航到默认首页,只需要写成to="/"
- [显示字段]:我们要显示给用户的导航名称,比如首页 新闻页。
明白了router-link的基本语法,我们在src/App.vue文件中的template里加入下面代码,实现导航
<p>导航:
<router-link to="/">首页</router-link>
<router-link to="/Hi">Hi页面</router-link>
</p>
现在我们访问页面访问已经多出了导航: